mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-11 19:56:37 +08:00
feat: 添加bbs前端
This commit is contained in:
橙子
261
Yi.BBS.Vue2/src/views/admin/AdmAction.vue
Normal file
261
Yi.BBS.Vue2/src/views/admin/AdmAction.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.action_name"
|
||||
label="权限名"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.router"
|
||||
label="路由"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.icon"
|
||||
label="图标"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.sort"
|
||||
label="排序"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<!-- <v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.fat"
|
||||
label="Fat (g)"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.carbs"
|
||||
label="Carbs (g)"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.protein"
|
||||
label="Protein (g)"
|
||||
></v-text-field>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<!-- <template>
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="15"
|
||||
:total-visible="7"
|
||||
></v-pagination>
|
||||
</template> -->
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import actionApi from "@/api/actionApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ text: "权限名", value: "action_name", sortable: false },
|
||||
{ text: "路由", value: "router", sortable: false },
|
||||
{ text: "图标", value: "icon", sortable: false },
|
||||
{ text: "排序", value: "sort", sortable: true },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
editedItem: {
|
||||
action_name: "",
|
||||
router: "/my/",
|
||||
icon: "mdi-lock",
|
||||
sort:"1"
|
||||
},
|
||||
defaultItem: {
|
||||
action_name: "",
|
||||
router: "/my/",
|
||||
icon: "mdi-lock",
|
||||
sort:"1"
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
actionApi.getActions().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
// 添加和修改都打开同一个编辑框
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
actionApi.delActionList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
if (this.editedIndex > -1) {
|
||||
actionApi.updateAction(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
actionApi.addAction(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
241
Yi.BBS.Vue2/src/views/admin/AdmBanner.vue
Normal file
241
Yi.BBS.Vue2/src/views/admin/AdmBanner.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.name"
|
||||
label="名称"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.logo"
|
||||
label="图标"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.color"
|
||||
label="名称颜色"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import bannerApi from "@/api/bannerApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "名称", value: "name", sortable: false },
|
||||
{ text: "图标", value: "logo", sortable: false },
|
||||
{ text: "名称颜色", value: "color", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
name: "",
|
||||
logo: "",
|
||||
color: "cyan",
|
||||
},
|
||||
defaultItem: {
|
||||
name: "",
|
||||
logo: "",
|
||||
color: "cyan",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
bannerApi.getBanners().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
bannerApi.delBannerList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
bannerApi.updateBanner(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
bannerApi.addBanner(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
232
Yi.BBS.Vue2/src/views/admin/AdmDiscuss.vue
Normal file
232
Yi.BBS.Vue2/src/views/admin/AdmDiscuss.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template> -->
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.title"
|
||||
label="标题"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.type"
|
||||
label="类型"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import discussApi from "@/api/discussApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "标题", value: "title", sortable: false },
|
||||
{ text: "类型", value: "type", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
title: "",
|
||||
type: "",
|
||||
},
|
||||
defaultItem: {
|
||||
title: "",
|
||||
type: "",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
discussApi.getDiscuss().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
discussApi.delDiscussList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
discussApi.updateDiscuss(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
discussApi.addDiscuss(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
250
Yi.BBS.Vue2/src/views/admin/AdmLevel.vue
Normal file
250
Yi.BBS.Vue2/src/views/admin/AdmLevel.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.num"
|
||||
label="等级数"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.name"
|
||||
label="等级称号"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.experience"
|
||||
label="需求经验"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.max_char"
|
||||
label="最大字符"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import levelApi from "@/api/levelApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "等级数", value: "num", sortable: false },
|
||||
{ text: "等级称号", value: "name", sortable: false },
|
||||
{ text: "需求经验", value: "experience", sortable: false },
|
||||
{ text: "最大字符", value: "max_char", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
num: "",
|
||||
name: "小白",
|
||||
experience: "0",
|
||||
max_char: "100",
|
||||
},
|
||||
defaultItem: {
|
||||
num: "",
|
||||
name: "小白",
|
||||
experience: "0",
|
||||
max_char: "100",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
levelApi.getLevels().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
levelApi.delLevelList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
levelApi.updateLevel(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
levelApi.addLevel(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
76
Yi.BBS.Vue2/src/views/admin/AdmLog.vue
Normal file
76
Yi.BBS.Vue2/src/views/admin/AdmLog.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="down(item)"> mdi-pencil </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import fileApi from "@/api/fileApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{ text: "日志名", value: "name", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
}),
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
down(item)
|
||||
{
|
||||
const baseurl = process.env.VUE_APP_BASE_API;
|
||||
const mylink=baseurl+`/File/showLog?filepath=${item.name}`
|
||||
var tempwindow=window.open();
|
||||
tempwindow.location=mylink;
|
||||
},
|
||||
initialize() {
|
||||
fileApi.getLogs().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
223
Yi.BBS.Vue2/src/views/admin/AdmMytype.vue
Normal file
223
Yi.BBS.Vue2/src/views/admin/AdmMytype.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.name"
|
||||
label="类型名称"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import mytypeApi from "@/api/mytypeApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "类型名称", value: "name", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
name: "",
|
||||
},
|
||||
defaultItem: {
|
||||
name: "",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
mytypeApi.getMytypes().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
mytypeApi.delMytypeList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
mytypeApi.updateMytype(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
mytypeApi.addMytype(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
241
Yi.BBS.Vue2/src/views/admin/AdmPlate.vue
Normal file
241
Yi.BBS.Vue2/src/views/admin/AdmPlate.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.name"
|
||||
label="主题名"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.logo"
|
||||
label="图标"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.introduction"
|
||||
label="简介"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import plateApi from "@/api/plateApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "主题名", value: "name", sortable: false },
|
||||
{ text: "图标", value: "logo", sortable: false },
|
||||
{ text: "简介", value: "introduction", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
name: "",
|
||||
logo: "",
|
||||
introduction: "",
|
||||
},
|
||||
defaultItem: {
|
||||
name: "",
|
||||
logo: "",
|
||||
introduction: "",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
plateApi.getPlates().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
plateApi.delPlateList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
plateApi.updatePlate(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
plateApi.addPlate(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
250
Yi.BBS.Vue2/src/views/admin/AdmProp.vue
Normal file
250
Yi.BBS.Vue2/src/views/admin/AdmProp.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.name"
|
||||
label="道具名"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.logo"
|
||||
label="图标"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.introduction"
|
||||
label="简介"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.color"
|
||||
label="色彩"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import propApi from "@/api/propApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "道具名", value: "name", sortable: false },
|
||||
{ text: "图标", value: "logo", sortable: false },
|
||||
{ text: "简介", value: "introduction", sortable: false },
|
||||
{ text: "色彩", value: "color", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
name: "",
|
||||
logo: "mdi-message-text",
|
||||
introduction: "暂无简介",
|
||||
color: "cyan",
|
||||
},
|
||||
defaultItem: {
|
||||
name: "",
|
||||
logo: "mdi-message-text",
|
||||
introduction: "暂无简介",
|
||||
color: "cyan",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
propApi.getProps().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
propApi.delPropList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
propApi.updateProp(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
propApi.addProp(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
307
Yi.BBS.Vue2/src/views/admin/AdmRole.vue
Normal file
307
Yi.BBS.Vue2/src/views/admin/AdmRole.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.role_name"
|
||||
label="角色名"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
<!-- 设置权限提示框 -->
|
||||
<v-dialog v-model="dialogAction" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">设置权限</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container fluid>
|
||||
<v-col cols="12">
|
||||
<v-combobox
|
||||
v-model="selectAction"
|
||||
:items="itemsAction"
|
||||
label="点击选择权限"
|
||||
multiple
|
||||
chips
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeAction">
|
||||
取消
|
||||
</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="saveAction">
|
||||
保存
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
<v-icon small @click="setActionItem(item)"> mdi-lock </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import roleApi from "@/api/roleApi";
|
||||
import actionApi from "@/api/actionApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
|
||||
allAction: [],
|
||||
selectAction: [],
|
||||
itemsAction: [],
|
||||
dialogAction: false,
|
||||
|
||||
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ text: "角色名", value: "role_name", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
role_name: "",
|
||||
},
|
||||
defaultItem: {
|
||||
role_name: "",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
roleApi.getRoles().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
roleApi.delRoleList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
roleApi.updateRole(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
roleApi.AddRole(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
|
||||
setActionItem(item) {
|
||||
//forEach中this指向已经发生变化
|
||||
//获取所有权限
|
||||
actionApi.getActions().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.allAction = response;
|
||||
this.itemsAction = [];
|
||||
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
this.itemsAction.push(response[i].action_name);
|
||||
}
|
||||
});
|
||||
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
|
||||
//获取该角色已存在的权限
|
||||
roleApi.GetActionByRoleId(this.editedItem.id).then((resp) => {
|
||||
const response = resp.data;
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
this.selectAction.push(response[i].action_name);
|
||||
}
|
||||
});
|
||||
this.dialogAction = true;
|
||||
},
|
||||
|
||||
closeAction() {
|
||||
this.dialogAction = false;
|
||||
this.selectAction = [];
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
saveAction() {
|
||||
var Ids = [];
|
||||
const myAllAction = this.allAction;
|
||||
for (let i = 0; i < myAllAction.length; i++) {
|
||||
var resule = this.selectAction.find(function (item) {
|
||||
return item == myAllAction[i].action_name;
|
||||
});
|
||||
if (resule) {
|
||||
Ids.push(myAllAction[i].id);
|
||||
}
|
||||
}
|
||||
roleApi.setAction(this.editedItem.id, Ids).then(() => {
|
||||
this.closeAction();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
96
Yi.BBS.Vue2/src/views/admin/AdmSetting.vue
Normal file
96
Yi.BBS.Vue2/src/views/admin/AdmSetting.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<v-form v-model="valid">
|
||||
<v-container>
|
||||
<v-card class="pa-4">
|
||||
<h2>设置</h2>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="form.title"
|
||||
:rules="myRules"
|
||||
:counter="10"
|
||||
label="站点标题"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-6"></v-divider>
|
||||
<h3>分页设置</h3>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="form.discussPage"
|
||||
:counter="10"
|
||||
label="主题每页数"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="form.commentPage"
|
||||
label="评论每页数"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-6"></v-divider>
|
||||
<h3>经验设置</h3>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="form.discussExperience"
|
||||
:counter="10"
|
||||
label="发布主题经验"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="form.commentExperience"
|
||||
label="发布评论经验"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-6"></v-divider>
|
||||
<v-btn dark color="cyan" @click="save">保存</v-btn>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
import settingApi from "@/api/settingApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
form: {},
|
||||
valid: false,
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
myRules: [
|
||||
(v) => !!v || "不能为空",
|
||||
(v) => v.length <= 10 || "请输入小于10个字符",
|
||||
],
|
||||
}),
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
settingApi.UpdateSetting(this.form).then((resp) => {
|
||||
this.initialize();
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
});
|
||||
},
|
||||
initialize() {
|
||||
settingApi.getSetting().then((resp) => {
|
||||
this.form = resp.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
255
Yi.BBS.Vue2/src/views/admin/AdmShop.vue
Normal file
255
Yi.BBS.Vue2/src/views/admin/AdmShop.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-select
|
||||
:items="items"
|
||||
filled
|
||||
label="选择道具"
|
||||
v-model="propItem"
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.price"
|
||||
label="定价"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.number"
|
||||
label="数量"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.discount"
|
||||
label="折扣"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import shopApi from "@/api/shopApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
items: ["置顶卡", "色彩卡", "匿名卡", "加密卡"],
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ text: "道具", value: "prop.name", sortable: false },
|
||||
{ text: "定价", value: "price", sortable: false },
|
||||
{ text: "数量", value: "number", sortable: false },
|
||||
{ text: "折扣", value: "discount", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
propItem:"",
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
price: "",
|
||||
number: "1",
|
||||
discount: "1.00",
|
||||
},
|
||||
defaultItem: {
|
||||
price: "",
|
||||
number: "1",
|
||||
discount: "1.00",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
shopApi.getShops().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
shopApi.delShopList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
var propId=0;
|
||||
switch(this.propItem){
|
||||
case "置顶卡":propId=1;break;
|
||||
case "色彩卡":propId=2;break;
|
||||
case "匿名卡":propId=3;break;
|
||||
case "加密卡":propId=4;break;
|
||||
|
||||
}
|
||||
if (this.editedIndex > -1) {
|
||||
shopApi.updateShop(this.editedItem,propId).then(() => this.initialize());
|
||||
} else {
|
||||
|
||||
shopApi.addShop(this.editedItem,propId).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
476
Yi.BBS.Vue2/src/views/admin/AdmUser.vue
Normal file
476
Yi.BBS.Vue2/src/views/admin/AdmUser.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
<!-- 设置特殊权限提示框 -->
|
||||
<v-dialog v-model="dialogAction" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">设置特殊权限</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container fluid>
|
||||
<v-col cols="12">
|
||||
<v-combobox
|
||||
v-model="selectAction"
|
||||
:items="itemsAction"
|
||||
label="点击选择特殊权限"
|
||||
multiple
|
||||
chips
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeAction">
|
||||
取消
|
||||
</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="saveAction">
|
||||
保存
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<!-- 设置角色提示框 -->
|
||||
<v-dialog v-model="dialogRole" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">设置角色</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container fluid>
|
||||
<v-col cols="12">
|
||||
<v-combobox
|
||||
v-model="selectRole"
|
||||
:items="itemsRole"
|
||||
label="点击选择角色"
|
||||
multiple
|
||||
chips
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeRole">
|
||||
取消
|
||||
</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="saveRole">
|
||||
保存
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="cyan" dark class="mb-2" @click="addListRole=true;dialogRole = true">
|
||||
设角
|
||||
</v-btn>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.username"
|
||||
label="用户名"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.password"
|
||||
label="密码"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.icon"
|
||||
label="头像"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.email"
|
||||
label="邮箱"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.nick"
|
||||
label="昵称"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.openId"
|
||||
label="QQid"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
<v-icon small class="mr-2" @click="setRoleItem(item)">
|
||||
mdi-gavel
|
||||
</v-icon>
|
||||
|
||||
<v-icon small @click="setActionItem(item)"> mdi-lock </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import userApi from "@/api/userApi";
|
||||
import roleApi from "@/api/roleApi";
|
||||
import actionApi from "@/api/actionApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
addListRole:false,
|
||||
allAction: [],
|
||||
selectAction: [],
|
||||
itemsAction: [],
|
||||
dialogAction: false,
|
||||
// -------------------------------
|
||||
allRole: [],
|
||||
selectRole: [],
|
||||
itemsRole: [],
|
||||
dialogRole: false,
|
||||
// -----------------------------
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ text: "用户名", value: "username", sortable: false },
|
||||
{ text: "密码", value: "password", sortable: false },
|
||||
{ text: "头像", value: "icon", sortable: false },
|
||||
{ text: "昵称", value: "nick", sortable: false },
|
||||
{ text: "邮箱", value: "email", sortable: false },
|
||||
{ text: "QQId", value: "openid", sortable: false },
|
||||
{ text: "ip", value: "ip", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
user_name: "",
|
||||
password: "",
|
||||
icon: "",
|
||||
nick: "",
|
||||
email: "",
|
||||
openid: "",
|
||||
ip: "",
|
||||
},
|
||||
defaultItem: {
|
||||
user_name: "",
|
||||
password: "",
|
||||
icon: "",
|
||||
nick: "",
|
||||
email: "",
|
||||
openid: "",
|
||||
ip: "",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
userApi.getAllUser().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
|
||||
roleApi.getRoles().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.allRole = response;
|
||||
this.itemsRole = [];
|
||||
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
this.itemsRole.push(response[i].role_name);
|
||||
}
|
||||
});
|
||||
|
||||
actionApi.getActions().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.allAction = response;
|
||||
this.itemsAction = [];
|
||||
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
this.itemsAction.push(response[i].action_name);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
userApi.delUserList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
userApi.updateUser(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
userApi.addUser(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
setRoleItem(item) {
|
||||
//forEach中this指向已经发生变化
|
||||
//获取所有角色
|
||||
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
//获取已经存在的角色
|
||||
userApi.getRoleByuserId(this.editedItem.id).then((resp) => {
|
||||
const response = resp.data;
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
this.selectRole.push(response[i].role_name);
|
||||
}
|
||||
});
|
||||
this.dialogRole = true;
|
||||
},
|
||||
closeRole() {
|
||||
this.addListRole=false;
|
||||
this.dialogRole = false;
|
||||
this.selectRole = [];
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
saveRole() {
|
||||
//保存角色(如果点击的是 批量设角色并且选择了目标 那就进行批量保存，否则，只设置一个)
|
||||
var Ids = [];
|
||||
const myAllRoles = this.allRole;
|
||||
for (let i = 0; i < myAllRoles.length; i++) {
|
||||
var resule = this.selectRole.find(function (item) {
|
||||
return item == myAllRoles[i].role_name;
|
||||
});
|
||||
if (resule) {
|
||||
Ids.push(myAllRoles[i].id);
|
||||
}
|
||||
}
|
||||
|
||||
//Ids为选中的角色列表
|
||||
|
||||
if (this.addListRole) {
|
||||
if (this.selected.length > 0) {
|
||||
|
||||
let userIds = this.selected.map(obj => {
|
||||
return obj.id; })
|
||||
|
||||
userApi.setRoleList(userIds, Ids).then(() => {
|
||||
this.closeRole();
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请选择至少一个用户进行批量设置", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.closeRole();
|
||||
}
|
||||
} else {
|
||||
userApi.setRole(this.editedItem.id, Ids).then(() => {
|
||||
this.closeRole();
|
||||
});
|
||||
}
|
||||
},
|
||||
// -----------------------------------------
|
||||
setActionItem(item) {
|
||||
//forEach中this指向已经发生变化
|
||||
//获取所有权限
|
||||
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
//获取已经存在的特殊权限
|
||||
userApi.getSpecialAction(this.editedItem.id).then((resp) => {
|
||||
const response = resp.data;
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
this.selectAction.push(response[i].action_name);
|
||||
}
|
||||
});
|
||||
this.dialogAction = true;
|
||||
},
|
||||
closeAction() {
|
||||
this.dialogAction = false;
|
||||
this.selectAction = [];
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
saveAction() {
|
||||
var Ids = [];
|
||||
const myAllAction = this.allAction;
|
||||
for (let i = 0; i < myAllAction.length; i++) {
|
||||
var resule = this.selectAction.find(function (item) {
|
||||
return item == myAllAction[i].action_name;
|
||||
});
|
||||
if (resule) {
|
||||
Ids.push(myAllAction[i].id);
|
||||
}
|
||||
}
|
||||
userApi.setSpecialAction(this.editedItem.id, Ids).then(() => {
|
||||
this.closeAction();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
250
Yi.BBS.Vue2/src/views/admin/AdmVersion.vue
Normal file
250
Yi.BBS.Vue2/src/views/admin/AdmVersion.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.ver"
|
||||
label="版本号"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.time"
|
||||
label="时间"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.color"
|
||||
label="颜色"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="editedItem.context"
|
||||
label="内容"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</v-btn>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
|
||||
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
//【2】这里设置对应的API
|
||||
import versionApi from "@/api/versionApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
dialogDelete: false,
|
||||
//【3】这里设置对应的模型字段
|
||||
headers: [
|
||||
{
|
||||
text: "编号",
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
|
||||
{ text: "版本号", value: "ver", sortable: false },
|
||||
{ text: "时间", value: "time", sortable: false },
|
||||
{ text: "颜色", value: "color", sortable: false },
|
||||
{ text: "内容", value: "context", sortable: false },
|
||||
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
//【4】这里设置对应的模型默认字段
|
||||
editedItem: {
|
||||
ver: "",
|
||||
time: "",
|
||||
color: "cyan",
|
||||
context: "",
|
||||
},
|
||||
defaultItem: {
|
||||
ver: "v",
|
||||
time: "",
|
||||
color: "cyan",
|
||||
context: "",
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
dialogDelete(val) {
|
||||
val || this.closeDelete();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize() {
|
||||
//【5】这里获取全部字段的API
|
||||
versionApi.getVersions().then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
//【6】这里多条删除的API
|
||||
versionApi.delVersionList(Ids).then(() => this.initialize());
|
||||
this.closeDelete();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
//【7】这里编辑和添加的API
|
||||
if (this.editedIndex > -1) {
|
||||
versionApi.updateVersion(this.editedItem).then(() => this.initialize());
|
||||
} else {
|
||||
versionApi.addVersion(this.editedItem).then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
275
Yi.BBS.Vue2/src/views/chathub.vue
Normal file
275
Yi.BBS.Vue2/src/views/chathub.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">添加标签</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field label="聊天室Id"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field label="聊天室密码"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-col cols="2" class="pb-0 d-none d-xl-flex">
|
||||
<v-card height="100%" width="100%" class="mx-auto">
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
v-if="my"
|
||||
color="cyan"
|
||||
elevation="2"
|
||||
@click="Add"
|
||||
large
|
||||
dark
|
||||
>
|
||||
添加聊天室
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list dense nav>
|
||||
<v-list-item
|
||||
v-for="(myitem, index) in items"
|
||||
:key="index"
|
||||
link
|
||||
@click="myitem.method"
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ myitem.name }}
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" xl="10" class="elevation-2">
|
||||
<v-row>
|
||||
<v-col cols="4" md="6">
|
||||
<div class="text-h5 title pt-6">
|
||||
<v-icon class="mx-2">mdi-menu</v-icon>聊天
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="2" md="2"></v-col>
|
||||
|
||||
<v-col cols="3" md="2">
|
||||
<v-btn dark color="blue" @click="con"> 开始连接 </v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3" md="2">
|
||||
<v-btn dark color="red" @click="closehub"> 断开连接 </v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-container>
|
||||
<v-card>
|
||||
<div
|
||||
ref="context"
|
||||
class="grey lighten-5"
|
||||
style="overflow-y: auto; height: 500px"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in form"
|
||||
:key="index"
|
||||
|
||||
>
|
||||
<div v-show="item.id == myform.id">
|
||||
<v-avatar size="40" class="elevation-2 ml-6 my-4">
|
||||
<img
|
||||
@click="intoInfo(item.id)"
|
||||
:src="
|
||||
baseurl + '/File/ShowNoticeImg?filePath=' + item.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<span
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="pa-3 rounded-lg ml-2 elevation-2 mr-6"
|
||||
:style="{ backgroundColor: 'white' }"
|
||||
v-html="item.context"
|
||||
></span>
|
||||
</template>
|
||||
<span>发表时间：{{ item.time }}</span>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="text-right" v-show="item.id != myform.id">
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<span
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="pa-3 rounded-lg ml-2 elevation-2"
|
||||
:style="{ backgroundColor: 'white' }"
|
||||
v-html="item.context"
|
||||
></span>
|
||||
</template>
|
||||
<span>发表时间：{{ item.time }}</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-avatar size="40" class="elevation-2 ml-2 my-4 mr-6">
|
||||
<img
|
||||
@click="intoInfo(item.id)"
|
||||
:src="
|
||||
baseurl + '/File/ShowNoticeImg?filePath=' + item.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-text-field
|
||||
label="输入你的聊天内容"
|
||||
v-model="myform.context"
|
||||
filled
|
||||
dense
|
||||
@keyup.enter="send"
|
||||
>
|
||||
<v-btn
|
||||
slot="append"
|
||||
fab
|
||||
color="cyan"
|
||||
small
|
||||
class="mb-2"
|
||||
@click="send"
|
||||
>
|
||||
<v-icon color="white"> mdi-send </v-icon>
|
||||
</v-btn>
|
||||
</v-text-field>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
myform: {
|
||||
id: 0,
|
||||
context: "",
|
||||
icon: "",
|
||||
time: "",
|
||||
},
|
||||
|
||||
my: false,
|
||||
dialog: false,
|
||||
items: [
|
||||
{ name: "#聊天大厅", method: "" },
|
||||
{ name: "#我的聊天室", method: "" },
|
||||
{ name: "#工作室", method: "" },
|
||||
{ name: "#项目团队", method: "" },
|
||||
{ name: "#其他", method: "" },
|
||||
],
|
||||
baseurl: "",
|
||||
form: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
pageIndex: {
|
||||
handler() {
|
||||
this.initializa();
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
console.log(this.signalr.connectionState);
|
||||
|
||||
this.myform.id = this.$store.state.user.user.id;
|
||||
(this.myform.icon = this.$store.state.user.user.icon),
|
||||
this.signalr.off("Show");
|
||||
var that = this;
|
||||
this.signalr.on("Show", (resp) => {
|
||||
that.form.push(resp);
|
||||
setTimeout(() => {
|
||||
that.$refs.context.scrollTop = that.$refs.context.scrollHeight;
|
||||
}, 100);
|
||||
});
|
||||
this.initializa();
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
methods: {
|
||||
con() {
|
||||
console.log(this.signalr);
|
||||
|
||||
this.signalr
|
||||
.start()
|
||||
.then(() => {
|
||||
alert("已连接");
|
||||
})
|
||||
.catch((err) => {
|
||||
alert("连接错误" + err);
|
||||
});
|
||||
},
|
||||
send() {
|
||||
this.signalr.invoke("SendMsg", this.myform);
|
||||
this.myform.context = "";
|
||||
},
|
||||
initializa() {
|
||||
if (
|
||||
this.$route.query.userId == undefined ||
|
||||
this.$route.query.userId == this.$store.state.user.user.id
|
||||
) {
|
||||
//表示是自己的用户
|
||||
this.my = true;
|
||||
}
|
||||
},
|
||||
Add() {
|
||||
this.dialog = true;
|
||||
},
|
||||
close() {
|
||||
this.dialog = false;
|
||||
},
|
||||
closehub() {
|
||||
this.signalr.stop();
|
||||
alert("已断开连接");
|
||||
},
|
||||
save() {
|
||||
this.close();
|
||||
},
|
||||
intoInfo(userId) {
|
||||
this.$router.push({
|
||||
path: `/userInfo`,
|
||||
query: {
|
||||
userId: userId,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
73
Yi.BBS.Vue2/src/views/file.vue
Normal file
73
Yi.BBS.Vue2/src/views/file.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-file-input
|
||||
ref="upFile"
|
||||
small-chips
|
||||
multiple
|
||||
label="点击上传文件"
|
||||
show-size
|
||||
counter
|
||||
@change="uploadFile"
|
||||
></v-file-input>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p v-for="(item,index) in fileUrls" :key="index">{{item}}</p>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
// 深刻理解一下文件上传：
|
||||
// <input type="file" ref="imgFile" @change="uploadImage()" class="d-none" />
|
||||
// <v-btn dark color="cyan" @click="choiceImg" class="mt-4">编辑</v-btn>
|
||||
// choiceImg：触发input点击事件，这个要绑定要按钮单机事件上
|
||||
// uploadImage：发送图片过去，这个要绑定要@change上，当有东西改变
|
||||
|
||||
// 通过ref获取文件，然后通过axios发送文件给后端，后端返回一个回调地址，前端解析一下换成图片和文件名
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data:()=>{
|
||||
return {
|
||||
fileUrls:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
|
||||
methods:{
|
||||
uploadFile(myFiles) {
|
||||
|
||||
|
||||
let formData = new FormData();
|
||||
for(var i=0;i<myFiles.length;i++)
|
||||
{
|
||||
formData.append("file", myFiles[i]);
|
||||
}
|
||||
|
||||
|
||||
axios
|
||||
.post(this.baseurl + "/File/upLoadFile", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
var resp=response.data.data;
|
||||
for(var i=0;i<resp.length;i++)
|
||||
{
|
||||
resp[i]= resp[i].replace("#", this.baseurl);
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.fileUrls=resp;
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
64
Yi.BBS.Vue2/src/views/html.vue
Normal file
64
Yi.BBS.Vue2/src/views/html.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
|
||||
<div ref="editorDiv" style="text-align: left; z-index: -1">
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import E from "wangeditor";
|
||||
export default {
|
||||
props: ["myhtml2"],
|
||||
data() {
|
||||
return {
|
||||
myhtml: this.myhtml2,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//使用初始化
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
this.initializa();
|
||||
},
|
||||
methods: {
|
||||
initializa() {
|
||||
//初始化创建
|
||||
var my = this;
|
||||
const editor = new E(this.$refs.editorDiv);
|
||||
this.myeditor = editor;
|
||||
editor.config.height = 750; //设置高度
|
||||
editor.config.placeholder = "输入你的内容"; //修改提示文字
|
||||
editor.config.zIndex = 1;
|
||||
editor.config.uploadImgServer = this.baseurl + "/File/OnPostUploadImage"; //配置图片接口
|
||||
editor.config.uploadVideoServer =
|
||||
this.baseurl + "/File/OnPostUploadVideo"; //配置视频接口
|
||||
editor.config.uploadImgHooks = {
|
||||
customInsert: function (insertImgFn, result) {
|
||||
// result 即服务端返回的接口
|
||||
// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
|
||||
result.data.forEach((item) => {
|
||||
insertImgFn(item.url.replace("#", my.baseurl));
|
||||
});
|
||||
},
|
||||
};
|
||||
editor.config.uploadVideoHooks = {
|
||||
customInsert: function (insertVideoFn, result) {
|
||||
// result 即服务端返回的接口
|
||||
insertVideoFn(result.data.url.replace("#", my.baseurl));
|
||||
|
||||
// insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
|
||||
},
|
||||
};
|
||||
|
||||
editor.config.onchange = function (html) {
|
||||
// 第二步，监控变化，同步更新到 textarea
|
||||
my.myhtml = html;
|
||||
my.$emit("giveData", html);
|
||||
};
|
||||
|
||||
|
||||
editor.create();
|
||||
editor.txt.html(this.myhtml);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
165
Yi.BBS.Vue2/src/views/login.vue
Normal file
165
Yi.BBS.Vue2/src/views/login.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="px-6 py-4 mx-auto elevation-4 rounded-md"
|
||||
style="height: 600px; width: 500px"
|
||||
>
|
||||
<div>
|
||||
<h1 class="title my-2">CCNetCore</h1>
|
||||
<v-subheader>登入你的用户</v-subheader>
|
||||
</div>
|
||||
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-text-field
|
||||
v-model="user_name"
|
||||
:rules="user_nameRules"
|
||||
label="用户名"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
label="密码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
type="password"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
:rules="[(v) => !!v || '同意后才可进入']"
|
||||
label="你同意协议吗？"
|
||||
required
|
||||
></v-checkbox
|
||||
></v-col>
|
||||
<v-col cols="6" class="text-right pt-8"
|
||||
><router-link to="register">前往注册</router-link></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="login"
|
||||
large
|
||||
style="width: 100%"
|
||||
@keyup.enter="enterSearch"
|
||||
:loading="loader"
|
||||
:disabled="btn_dis"
|
||||
>
|
||||
登入
|
||||
</v-btn>
|
||||
<p class="my-2">或使用登录</p>
|
||||
<!-- <v-btn class="my-2 cyan white--text" @click="qqlogin" large style="width: 100%" :loading="loader" :disabled="btn_dis"> -->
|
||||
<v-btn class="my-2 cyan white--text" @click="qqlogin" large style="width: 100%" :loading="loader">
|
||||
<v-icon class="mx-2" > mdi-qqchat </v-icon>
|
||||
QQ
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="cyan white--text" @click="yklogin" large style="width: 100%" :loading="loader" :disabled="btn_dis">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
临时游客
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import myqq from "../utils/myqq";
|
||||
export default {
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
valid: true,
|
||||
user_name: "",
|
||||
user_nameRules: [
|
||||
(v) => !!v || "用户名不能为空",
|
||||
(v) => (v && v.length <= 20) || "用户名必须小于20个字符",
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
(v) => !!v || "密码不能为空",
|
||||
(v) => (v && v.length <= 120) || "密码必须小于20个字符",
|
||||
],
|
||||
select: null,
|
||||
checkbox: true,
|
||||
}),
|
||||
created() {
|
||||
this.enterSearch();
|
||||
},
|
||||
methods: {
|
||||
enterSearch() {
|
||||
document.onkeydown = (e) => {
|
||||
//13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
|
||||
if (e.keyCode === 13 && e.target.baseURI.match("/")) {
|
||||
//回车后执行搜索方法
|
||||
this.login();
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
qqlogin() {
|
||||
QC.Login.showPopup(myqq.myqqLogin);
|
||||
// window.close();
|
||||
},
|
||||
yklogin() {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Login", {
|
||||
username: "游客",
|
||||
password: "",
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
login() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Login", {
|
||||
username: this.user_name,
|
||||
password: this.password,
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status==200) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader = null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.data.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
86
Yi.BBS.Vue2/src/views/markdown.vue
Normal file
86
Yi.BBS.Vue2/src/views/markdown.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<mavon-editor
|
||||
previewBackground="#ffffff"
|
||||
v-model="myhtml2"
|
||||
ref="md"
|
||||
@imgAdd="$imgAdd"
|
||||
@change="change"
|
||||
:ishljs="true"
|
||||
codeStyle="atelier-cave-dark"
|
||||
style="height: 800px; z-index: 1"
|
||||
:externalLink="externalLink"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
// 该组件中注释掉的代码为局部注册的方式。
|
||||
import { mavonEditor } from "mavon-editor";
|
||||
import "mavon-editor/dist/css/index.css";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
props: ["myhtml2"],
|
||||
data: function () {
|
||||
return {
|
||||
content: this.myhtml2,
|
||||
html: "",
|
||||
baseurl: "",
|
||||
configs: {},
|
||||
externalLink: {
|
||||
markdown_css: function () {
|
||||
// 这是你的markdown css文件路径
|
||||
return "/markdown/github-markdown.min.css";
|
||||
},
|
||||
hljs_js: function () {
|
||||
// 这是你的hljs文件路径
|
||||
return "/highlightjs/highlight.min.js";
|
||||
},
|
||||
hljs_css: function (css) {
|
||||
// 这是你的代码高亮配色文件路径
|
||||
return "/highlightjs/styles/" + css + ".min.css";
|
||||
},
|
||||
hljs_lang: function (lang) {
|
||||
// 这是你的代码高亮语言解析路径
|
||||
return "/highlightjs/languages/" + lang + ".min.js";
|
||||
},
|
||||
katex_css: function () {
|
||||
// 这是你的katex配色方案路径路径
|
||||
return "/katex/katex.min.css";
|
||||
},
|
||||
katex_js: function () {
|
||||
// 这是你的katex.js路径
|
||||
return "/katex/katex.min.js";
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
mavonEditor,
|
||||
},
|
||||
mounted() {
|
||||
//使用初始化
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
methods: {
|
||||
// 将图片上传到服务器，返回地址替换到md中
|
||||
$imgAdd(pos, $file) {
|
||||
var formdata = new FormData();
|
||||
formdata.append("file", $file);
|
||||
//将下面上传接口替换为你自己的服务器接口
|
||||
axios({
|
||||
url: this.baseurl + "/File/OnPostUploadImage",
|
||||
method: "post",
|
||||
data: formdata,
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
}).then((resp) => {
|
||||
var myurl = resp.data.data[0].url;
|
||||
|
||||
this.$refs.md.$img2Url(pos, myurl.replace("#", this.baseurl));
|
||||
});
|
||||
},
|
||||
change(value, render) {
|
||||
// render 为 markdown 解析后的结果
|
||||
this.myhtml2 = value;
|
||||
this.$emit("giveData", value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
48
Yi.BBS.Vue2/src/views/qq.vue
Normal file
48
Yi.BBS.Vue2/src/views/qq.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>正在验证qq中。。。。。。</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
|
||||
if (QC.Login.check()) {
|
||||
// 检查是否登录
|
||||
// QC.api("get_user_info", {})
|
||||
// .success(function(s){//成功回调
|
||||
// alert("获取用户信息成功！当前用户昵称为："+s.data.nickname);
|
||||
// })
|
||||
//返回的值为true说明让登录，直接跳转到主页面，并进行自动登录
|
||||
|
||||
QC.Login.getMe(function (openId, accessToken) {
|
||||
if (that.$route.query.state == 0) {
|
||||
that.$store.dispatch("qqLogin", openId).then((resp) => {
|
||||
if (resp.status) {
|
||||
that.$router.push({ path: "/" });
|
||||
} else {
|
||||
alert(resp.msg);
|
||||
that.$router.push({ path: "/register" });
|
||||
}
|
||||
});
|
||||
} else if (that.$route.query.state == 1) {
|
||||
//如果是为了绑定qq，传opid和userId
|
||||
that.$store.dispatch("qqUpdate", openId).then((resp) => {
|
||||
if (resp.status) {
|
||||
that.$router.push({ path: "/" });
|
||||
} else {
|
||||
alert(resp.msg);
|
||||
that.$router.push({ path: "/userinfo" });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
QC.Login.signOut();
|
||||
} else {
|
||||
alert("登录失败");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
247
Yi.BBS.Vue2/src/views/register.vue
Normal file
247
Yi.BBS.Vue2/src/views/register.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="px-6 py-4 mx-auto elevation-4 rounded-md"
|
||||
style=" height: 600px; width: 500px"
|
||||
>
|
||||
<div>
|
||||
<h1 class="title my-2">CCNetCore</h1>
|
||||
<v-subheader>注册加入我们</v-subheader>
|
||||
</div>
|
||||
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-text-field
|
||||
v-model="user_name"
|
||||
:rules="user_nameRules"
|
||||
label="用户名"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
ref="myemail"
|
||||
v-model="email"
|
||||
:rules="emailRules"
|
||||
label="邮箱"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
></v-text-field>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="6" md="8">
|
||||
<v-text-field
|
||||
v-model="code"
|
||||
label="验证码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="1">
|
||||
<v-progress-circular
|
||||
class="mt-2"
|
||||
size="40"
|
||||
:rotate="360"
|
||||
:value="value"
|
||||
color="cyan"
|
||||
>
|
||||
{{ value }}
|
||||
</v-progress-circular>
|
||||
</v-col>
|
||||
<v-col cols="4" md="3">
|
||||
<!-- <v-btn class="mt-1" large :dark="!dis_mail" color="cyan" @click="sendMail"
|
||||
:disabled="dis_mail"> -->
|
||||
<v-btn class="mt-1" large :dark="!dis_mail" color="cyan" @click="sendMail"
|
||||
>
|
||||
发送</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
label="密码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
type="password"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
:rules="[(v) => !!v || '同意后才可进入']"
|
||||
label="你同意协议吗？"
|
||||
required
|
||||
></v-checkbox
|
||||
></v-col>
|
||||
<v-col cols="6" class="text-right pt-8"
|
||||
><router-link to="login">返回</router-link></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<!-- <v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="register"
|
||||
large
|
||||
style="width: 100%"
|
||||
:loading="loader"
|
||||
:disabled="btn_dis"
|
||||
> -->
|
||||
<v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="register"
|
||||
large
|
||||
style="width: 100%"
|
||||
:loading="loader"
|
||||
>
|
||||
注册
|
||||
</v-btn>
|
||||
<!-- <p>或使用登录</p>
|
||||
<v-btn dark class="my-2 cyan" @click="login" large style="width: 100%">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
QQ
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark class="cyan" @click="login" large style="width: 100%">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
微信
|
||||
</v-btn> -->
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import accountApi from "../api/accountApi.js";
|
||||
export default {
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
dis_mail:false,
|
||||
value:100,
|
||||
code: "",
|
||||
valid: true,
|
||||
user_name: "",
|
||||
user_nameRules: [
|
||||
(v) => !!v || "用户名不能为空",
|
||||
(v) => (v && v.length <= 20) || "用户名必须小于20个字符",
|
||||
],
|
||||
email: "",
|
||||
emailRules: [
|
||||
(v) => !!v || "邮箱不能为空",
|
||||
(v) => /.+@.+\..+/.test(v) || "无效的邮箱",
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
(v) => !!v || "密码不能为空",
|
||||
(v) => (v && v.length <= 120) || "密码必须小于120个字符",
|
||||
(v) => (v && v.length >= 7) || "密码必须大于等于7个字符",
|
||||
],
|
||||
select: null,
|
||||
checkbox: true,
|
||||
}),
|
||||
created()
|
||||
{
|
||||
setInterval(this.addValue,1000)
|
||||
},
|
||||
// watch:{
|
||||
// value(val,old)
|
||||
// {
|
||||
|
||||
// val+=1
|
||||
// if (val==100)
|
||||
// {
|
||||
// this.dis_mail=false
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// this.dis_mail=true
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
addValue()
|
||||
{
|
||||
if(this.value<=99)
|
||||
{
|
||||
this.value+=1
|
||||
}
|
||||
if(this.value==100)
|
||||
{
|
||||
this.dis_mail=false
|
||||
}
|
||||
else
|
||||
{
|
||||
this.dis_mail=true
|
||||
}
|
||||
},
|
||||
register() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Register", {
|
||||
username: this.user_name,
|
||||
password: this.password,
|
||||
email: this.email,
|
||||
code: this.code,
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.$router.push("/login");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
},
|
||||
sendMail() {
|
||||
if (this.$refs.myemail.validate()) {
|
||||
|
||||
this.value=0
|
||||
this.dis_mail=true
|
||||
accountApi.email(this.email).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入邮箱", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
151
Yi.BBS.Vue2/src/views/user/Index.vue
Normal file
151
Yi.BBS.Vue2/src/views/user/Index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template >
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="8">
|
||||
<v-carousel
|
||||
cycle
|
||||
height="300"
|
||||
hide-delimiter-background
|
||||
show-arrows-on-hover
|
||||
|
||||
>
|
||||
<v-carousel-item :src="slide.logo" v-for="(slide, i) in bannerList" :key="i">
|
||||
|
||||
<v-row class="fill-height" align="center" justify="center">
|
||||
<div :style="{color:slide.color}" class="display-3">{{ slide.name }} </div>
|
||||
</v-row>
|
||||
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-card class="mt-8 mx-auto">
|
||||
<v-sheet
|
||||
class="v-sheet--offset mx-auto"
|
||||
color="cyan"
|
||||
elevation="12"
|
||||
max-width="calc(100% - 32px)"
|
||||
>
|
||||
<v-sparkline
|
||||
:labels="labels"
|
||||
:value="value"
|
||||
color="white"
|
||||
line-width="2"
|
||||
padding="16"
|
||||
></v-sparkline>
|
||||
</v-sheet>
|
||||
|
||||
<v-card-text class="pt-0">
|
||||
<div class="title font-weight-light mb-2">用户访问数量</div>
|
||||
<div class="subheading font-weight-light grey--text">
|
||||
数据分析
|
||||
</div>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-icon class="mr-2" small> mdi-clock </v-icon>
|
||||
<span class="caption grey--text font-weight-light"
|
||||
>最新来自26分钟之前</span
|
||||
>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="text-center">
|
||||
<v-col v-for="(item, i) in plateList" :key="i" cols="12" sm="4" md="3">
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card class="mx-auto" color="grey lighten-4" max-width="600">
|
||||
<v-img
|
||||
:aspect-ratio="16 / 9"
|
||||
:src="item.logo"
|
||||
>
|
||||
<v-expand-transition>
|
||||
<div
|
||||
v-if="hover"
|
||||
class="d-flex transition-fast-in-fast-out cyan darken-2 v-card--reveal display-3 white--text"
|
||||
style="height: 100%"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-img>
|
||||
<v-card-text class="pt-6" style="position: relative">
|
||||
<v-btn
|
||||
absolute
|
||||
color="cyan"
|
||||
class="white--text"
|
||||
fab
|
||||
large
|
||||
right
|
||||
top
|
||||
@click="intoDiscuss(item.id,item.name)"
|
||||
>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
<div class="font-weight-light title mb-2 cyan--text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="font-weight-light mb-2 grey--text">
|
||||
{{item.introduction}}
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" md="4"> </v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import plateApi from "@/api/plateApi";
|
||||
import bannerApi from "@/api/bannerApi";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
plateList: [],
|
||||
bannerList:[],
|
||||
labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||||
|
||||
value: [423, 446, 675, 510, 590, 610, 760],
|
||||
colors: ["cyan", "primary", "cyan", "light-blue"],
|
||||
slides: ["First", "Second", "Third", "Fourth"],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
methods: {
|
||||
initializa() {
|
||||
bannerApi.getBanners().then(resp=>{
|
||||
this.bannerList=resp.data.items;
|
||||
})
|
||||
|
||||
plateApi.getPlates().then((resp) => {
|
||||
this.plateList = resp.data.items;
|
||||
});
|
||||
},
|
||||
intoDiscuss(plateId,plateString) {
|
||||
this.$store.dispatch("set_plateString", plateString);
|
||||
this.$store.dispatch("set_plateId", plateId);
|
||||
this.$router.push({ path: "/discuss" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.v-card--reveal {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.v-sheet--offset {
|
||||
top: -24px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
380
Yi.BBS.Vue2/src/views/user/addArticle.vue
Normal file
380
Yi.BBS.Vue2/src/views/user/addArticle.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-card>
|
||||
<v-navigation-drawer
|
||||
right
|
||||
app
|
||||
v-model="drawer"
|
||||
:style="{ width: articleWidth + 'px' }"
|
||||
>
|
||||
<!-- <v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
color="blue"
|
||||
elevation="2"
|
||||
@click="drawer = !drawer"
|
||||
large
|
||||
dark
|
||||
>
|
||||
关闭目录
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item> -->
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn color="blue" elevation="2" @click="updateWidth" large dark>
|
||||
扩展目录
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn color="cyan" elevation="2" @click="getCache" large dark>
|
||||
拉取备份
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn color="cyan" elevation="2" @click="intoAdd2" large dark>
|
||||
添加目录
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item link>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title
|
||||
>根目录
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
color="cyan"
|
||||
v-on="on"
|
||||
@click="updataDiscuss()"
|
||||
>
|
||||
mdi-book-edit
|
||||
</v-icon>
|
||||
</template>
|
||||
<span>编辑根目录</span>
|
||||
</v-tooltip>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list dense nav>
|
||||
<v-list-item>
|
||||
<v-treeview
|
||||
:items="articleList"
|
||||
style="width: 100%"
|
||||
open-on-click
|
||||
activatable
|
||||
return-object
|
||||
:active.sync="selectArt"
|
||||
>
|
||||
<template v-slot:append="{ item }">
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
color="cyan"
|
||||
@click="intoAddArticle(item.id)"
|
||||
>mdi-plus-box-multiple</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>添加下一级子目录</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
color="cyan"
|
||||
@click="intoArticle(item.id)"
|
||||
>mdi-book-edit-outline</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>编辑</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
color="cyan"
|
||||
@click="delArticle(item.id)"
|
||||
>mdi-close-circle</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-treeview>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-card>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-text-field label="目录名" v-model="form.name"></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<markdownEdit @giveData="getHtml" :myhtml2="myhtml"></markdownEdit>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-btn class="my-12" width="100%" large color="success" @click="send()"
|
||||
>确认</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import articleApi from "@/api/articleApi";
|
||||
import markdownEdit from "@/views/markdown";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mytimer: null,
|
||||
selectArt: [],
|
||||
articleWidth: "260",
|
||||
drawer: true,
|
||||
articleList: [],
|
||||
baseurl: "",
|
||||
form: {
|
||||
id: 0,
|
||||
name: "",
|
||||
content: "",
|
||||
},
|
||||
myhtml: "",
|
||||
selectIndex: 0,
|
||||
};
|
||||
},
|
||||
// watch: {
|
||||
// selectArt: {
|
||||
// handler(new1, old2) {
|
||||
// // console.log(new1)
|
||||
// // this.intoArticle(new1[0].id);
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
mounted() {
|
||||
//使用初始化
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
methods: {
|
||||
getCache() {
|
||||
articleApi.getArticleByCache(this.$route.query.articleId).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.myhtml = resp.data;
|
||||
this.$dialog.notify.success("已在云端发现备份", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("未在云端发现备份", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setCache() {
|
||||
articleApi
|
||||
.setArticleByCache(this.$route.query.articleId, this.myhtml)
|
||||
.then((resp) => {
|
||||
this.$dialog.notify.success("已成功自动备份云端", {
|
||||
position: "top-right",
|
||||
timeout: 2000,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
intoAdd2() {
|
||||
this.$router.push({ path: "/addArticle" });
|
||||
this.form.name = "";
|
||||
this.form.content = "";
|
||||
this.myhtml = "";
|
||||
},
|
||||
delArticle(acticleId) {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
text: "你确定要删除该项吗？",
|
||||
title: "Warning",
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp) {
|
||||
articleApi
|
||||
.delArticleList([acticleId], this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.initializa();
|
||||
} else {
|
||||
alert("权限不足！");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
updataDiscuss() {
|
||||
this.$router.push({
|
||||
path: `/AddDiscuss`,
|
||||
query: {
|
||||
discussId: this.$store.state.home.discussId,
|
||||
},
|
||||
});
|
||||
this.initializa();
|
||||
},
|
||||
updateWidth() {
|
||||
if (this.articleWidth == "260") {
|
||||
this.articleWidth = "500";
|
||||
} else {
|
||||
this.articleWidth = "260";
|
||||
}
|
||||
},
|
||||
intoAddArticle(parentId) {
|
||||
this.$router.push({
|
||||
path: `/addArticle`,
|
||||
query: {
|
||||
parentId: parentId,
|
||||
},
|
||||
});
|
||||
this.form.name = "";
|
||||
this.form.content = "";
|
||||
this.myhtml = "";
|
||||
},
|
||||
send() {
|
||||
this.form.content = this.myhtml;
|
||||
|
||||
if (
|
||||
this.$route.query.articleId == undefined &&
|
||||
this.$route.query.parentId == undefined
|
||||
) {
|
||||
//没有传任何值，代表是添加
|
||||
articleApi
|
||||
.addArticle(this.form, this.$store.state.home.discussId)
|
||||
.then((response) => {
|
||||
if (response.status) {
|
||||
this.$dialog.notify.success("目录添加成功", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.initializa();
|
||||
} else {
|
||||
alert("权限不足！");
|
||||
}
|
||||
});
|
||||
} else if (
|
||||
this.$route.query.articleId != undefined &&
|
||||
this.$route.query.parentId == undefined
|
||||
) {
|
||||
//只传了文章id，代表更新
|
||||
articleApi
|
||||
.updateArticle(this.form, this.$store.state.home.discussId)
|
||||
.then((response) => {
|
||||
if (response.status) {
|
||||
this.$dialog.notify.success("文章更新成功", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.initializa();
|
||||
} else {
|
||||
alert("权限不足！");
|
||||
}
|
||||
});
|
||||
} else if (
|
||||
this.$route.query.articleId == undefined &&
|
||||
this.$route.query.parentId != undefined
|
||||
) {
|
||||
//只传了父级id，代表添加子目录
|
||||
|
||||
articleApi
|
||||
.addChildrenArticle(
|
||||
this.form,
|
||||
this.$route.query.parentId,
|
||||
this.$store.state.home.discussId
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status) {
|
||||
this.$dialog.notify.success("添加子目录成功", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.initializa();
|
||||
} else {
|
||||
alert("权限不足！");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
initializa() {
|
||||
window.clearInterval(this.mytimer);
|
||||
setTimeout(function () {
|
||||
window.scrollTo(0, 0);
|
||||
}, 500);
|
||||
|
||||
articleApi
|
||||
.getArticlesByDiscussId(this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
this.articleList = resp.data;
|
||||
});
|
||||
|
||||
if (this.$route.query.articleId != undefined) {
|
||||
//下面是进行更新(没有传文章id或者父级id)
|
||||
//每30秒轮询保存
|
||||
this.mytimer = window.setInterval(() => {
|
||||
setTimeout(this.setCache, 0);
|
||||
}, 1000 * 60 * 1);
|
||||
articleApi
|
||||
.getArticleById(this.$route.query.articleId)
|
||||
.then((response) => {
|
||||
const resp = response.data;
|
||||
this.form.id = resp.id;
|
||||
this.form.name = resp.name;
|
||||
this.myhtml = resp.content;
|
||||
});
|
||||
}
|
||||
},
|
||||
intoArticle(articleId) {
|
||||
this.$router.push({
|
||||
path: `/addArticle`,
|
||||
query: {
|
||||
articleId: articleId,
|
||||
},
|
||||
});
|
||||
articleApi.getArticleById(articleId).then((response) => {
|
||||
const resp = response.data;
|
||||
this.form.id = resp.id;
|
||||
this.form.name = resp.name;
|
||||
this.myhtml = resp.content;
|
||||
});
|
||||
},
|
||||
getHtml(html) {
|
||||
this.myhtml = html;
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
window.clearInterval(this.mytimer);
|
||||
},
|
||||
components: {
|
||||
markdownEdit,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
156
Yi.BBS.Vue2/src/views/user/addDiscuss.vue
Normal file
156
Yi.BBS.Vue2/src/views/user/addDiscuss.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="1">
|
||||
<v-select
|
||||
:items="items"
|
||||
filled
|
||||
label="类别"
|
||||
required
|
||||
v-model="form.type"
|
||||
dense
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="11">
|
||||
<v-text-field label="标题" v-model="form.title"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-combobox
|
||||
v-model="selectLabel"
|
||||
:items="itemLabel"
|
||||
label="点击选择标签"
|
||||
multiple
|
||||
dense
|
||||
chips
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="8">
|
||||
<v-text-field label="简介" v-model="form.introduction"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" >
|
||||
<markdownEdit
|
||||
@giveData="getHtml"
|
||||
:myhtml2="myhtml"
|
||||
></markdownEdit>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
<v-btn
|
||||
class="my-12"
|
||||
width="100%"
|
||||
color="success"
|
||||
large
|
||||
@click="send()"
|
||||
>确认</v-btn
|
||||
>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import labelApi from "@/api/labelApi";
|
||||
import discussApi from "@/api/discussApi";
|
||||
import markdownEdit from "@/views/markdown";
|
||||
import mytypeApi from "@/api/mytypeApi";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectLabel: [], //这里存放的是名称列表
|
||||
lableList: [], //这里存放的是id和名字
|
||||
itemLabel: [],
|
||||
baseurl: "",
|
||||
form: {
|
||||
id: 0,
|
||||
title: "",
|
||||
type: "",
|
||||
introduction: "",
|
||||
content: "",
|
||||
},
|
||||
items: [],
|
||||
myhtml: "",
|
||||
selectIndex: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//使用初始化
|
||||
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
methods: {
|
||||
send() {
|
||||
this.form.content = this.myhtml;
|
||||
var Ids = [];
|
||||
for (var i = 0; i < this.selectLabel.length; i++) {
|
||||
for (var j = 0; j < this.lableList.length; j++) {
|
||||
if (this.selectLabel[i] == this.lableList[j].name) {
|
||||
Ids.push(this.lableList[j].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.form.type == "") {
|
||||
this.form.type = "闲聊";
|
||||
}
|
||||
if (this.$route.query.discussId == undefined) {
|
||||
discussApi
|
||||
.addDiscuss(this.form, this.$store.state.home.plateId, Ids)
|
||||
.then((resp) => {
|
||||
this.$store.dispatch("set_discussId", resp.data.id);
|
||||
//设置等级
|
||||
this.$store.dispatch("setLevel", resp.data.level);
|
||||
this.$router.push({ path: "/comment" });
|
||||
});
|
||||
} else {
|
||||
discussApi.updateDiscuss(this.form).then((response) => {
|
||||
if (response.status) {
|
||||
this.$router.push({ path: "/comment" });
|
||||
} else {
|
||||
alert("权限不足！");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
getHtml(html) {
|
||||
this.myhtml = html;
|
||||
},
|
||||
initializa() {
|
||||
mytypeApi.getMytypes().then((resp) => {
|
||||
window.scrollTo(0,0);
|
||||
const response = resp.data.items;
|
||||
response.forEach((item) => {
|
||||
this.items.push(item.name);
|
||||
});
|
||||
});
|
||||
|
||||
if (this.$route.query.discussId != undefined) {
|
||||
discussApi
|
||||
.getDiscussByDiscussId(this.$route.query.discussId)
|
||||
.then((response) => {
|
||||
const res = response.data;
|
||||
this.form.id = res.id;
|
||||
|
||||
this.form.title = res.title;
|
||||
this.form.type = res.type;
|
||||
this.form.introduction = res.introduction;
|
||||
this.myhtml = res.content;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
labelApi.getLabelByUserId().then((resp) => {
|
||||
this.lableList = resp.data;
|
||||
this.itemLabel = resp.data.map((obj) => {
|
||||
return obj.name;
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
markdownEdit,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
190
Yi.BBS.Vue2/src/views/user/collection.vue
Normal file
190
Yi.BBS.Vue2/src/views/user/collection.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
<v-col cols="12" class="elevation-2 mt-3">
|
||||
<v-row>
|
||||
<v-col cols="4" md="6">
|
||||
<div class="text-h5 title pt-6">收藏</div>
|
||||
</v-col>
|
||||
<v-col cols="8" md="6">
|
||||
<v-text-field label="搜索">
|
||||
<v-icon slot="append" color="red">
|
||||
mdi-plus
|
||||
</v-icon></v-text-field
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-container>
|
||||
<v-expansion-panels inset focusable>
|
||||
<v-expansion-panel
|
||||
class="p-1"
|
||||
v-for="(item, i) in discussList"
|
||||
:key="i"
|
||||
>
|
||||
<v-expansion-panel-header>
|
||||
<v-row align="center" class="spacer" no-gutters>
|
||||
<v-col cols="2" sm="1" md="1">
|
||||
<v-avatar size="36px">
|
||||
<img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
<v-col cols="8" sm="5" md="8">
|
||||
[{{ item.type }}] {{ item.title }}
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2" sm="5" md="3" class="hidden-sm-and-down">
|
||||
<v-subheader>
|
||||
{{ item.user.username }}<br />
|
||||
{{ item.time }}</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
|
||||
<v-expansion-panel-content>
|
||||
{{ item.introduction }}
|
||||
<div class="mt-2">
|
||||
<v-btn
|
||||
class="mr-2"
|
||||
fab
|
||||
small
|
||||
dark
|
||||
color="indigo"
|
||||
@click="intoComment(item.id, item.plate.id)"
|
||||
>
|
||||
<v-icon dark> mdi-login </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark> mdi-format-list-bulleted-square </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark> mdi-pencil </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark @click="deleteItem(item.id)"> mdi-close </v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="text-center mt-4 mb-10">
|
||||
<v-pagination
|
||||
v-model="pageIndex"
|
||||
:length="lenData"
|
||||
:total-visible="7"
|
||||
prev-icon="mdi-menu-left"
|
||||
next-icon="mdi-menu-right"
|
||||
circle
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import collectionApi from "@/api/collectionApi";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogDelete: false,
|
||||
delId: 0,
|
||||
dialog: false,
|
||||
plateId: "",
|
||||
baseurl: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
discussList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
pageIndex: {
|
||||
handler() {
|
||||
this.initializa();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
computed: {
|
||||
lenData() {
|
||||
return Math.floor(this.total / this.pageSize) + 1;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initializa() {
|
||||
//初始化创建
|
||||
collectionApi.getCollections(this.pageIndex).then((resp) => {
|
||||
this.discussList = resp.data.pageData;
|
||||
this.total = resp.data.total;
|
||||
this.pageSize = resp.data.pageSize;
|
||||
});
|
||||
},
|
||||
|
||||
deleteItem(id) {
|
||||
this.delId = id;
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
collectionApi.delCollection(this.delId).then(() => this.initializa());
|
||||
this.closeDelete();
|
||||
},
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
},
|
||||
save() {
|
||||
labelApi.addLabelByUserId(this.form).then(() => this.initializa());
|
||||
this.close();
|
||||
},
|
||||
intoComment(discussId, plateId) {
|
||||
this.$store.dispatch("set_plateId", plateId);
|
||||
this.$store.dispatch("set_discussId", discussId);
|
||||
this.$router.push({ path: "/comment" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
733
Yi.BBS.Vue2/src/views/user/comment.vue
Normal file
733
Yi.BBS.Vue2/src/views/user/comment.vue
Normal file
@@ -0,0 +1,733 @@
|
||||
<template>
|
||||
<v-container :fluid="is_fluid">
|
||||
<v-row>
|
||||
<v-col class="pb-0">
|
||||
<v-card height="100%" class="mx-auto">
|
||||
<v-navigation-drawer right app v-model="drawer" style="width: 500px">
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
color="blue"
|
||||
elevation="2"
|
||||
@click="drawer = !drawer"
|
||||
large
|
||||
dark
|
||||
>
|
||||
关闭目录
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn color="cyan" elevation="2" @click="intoAdd2" large dark>
|
||||
添加目录
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item link @click="initializa()">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title
|
||||
>根目录
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
color="cyan"
|
||||
v-on="on"
|
||||
@click="updataDiscuss(discussData.id)"
|
||||
>
|
||||
mdi-book-edit
|
||||
</v-icon>
|
||||
</template>
|
||||
<span>编辑根目录</span>
|
||||
</v-tooltip>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list dense nav>
|
||||
<v-list-item>
|
||||
<v-treeview
|
||||
:items="articleList"
|
||||
style="width: 100%"
|
||||
open-on-click
|
||||
activatable
|
||||
return-object
|
||||
:active.sync="selectArt"
|
||||
>
|
||||
<template v-slot:prepend="{ item }">
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
dark
|
||||
color="cyan"
|
||||
@click="showArticle(item.id)"
|
||||
>mdi-arrow-right-drop-circle-outline</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>查阅</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-slot:append="{ item }">
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
color="cyan"
|
||||
@click="intoAddArticle(item.id)"
|
||||
>mdi-plus-box-multiple</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>添加下一级子目录</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
color="cyan"
|
||||
@click="intoArticle(item.id)"
|
||||
>mdi-book-edit-outline</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>编辑</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
color="cyan"
|
||||
@click="delArticle(item.id)"
|
||||
>mdi-close-circle</v-icon
|
||||
>
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-treeview>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card class="mx-auto my-2" max-width="100%">
|
||||
<v-card-text>
|
||||
<p class="display-1 text--primary">
|
||||
{{ discussData.title }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon class="ml-2" @click="drawer = !drawer"
|
||||
>mdi-clipboard-text-outline</v-icon
|
||||
>
|
||||
<a class="mr-2" @click="drawer = !drawer">目录开关</a>
|
||||
<v-icon class="ml-2" @click="loog()">mdi-file-eye-outline</v-icon>
|
||||
<a class="mr-2" @click="loog()">长文本阅读</a>
|
||||
|
||||
<v-icon class="ml-2" @click="initializa()"
|
||||
>mdi-file-refresh-outline</v-icon
|
||||
>
|
||||
<a class="mr-2" @click="initializa()">重置</a>
|
||||
|
||||
<v-icon class="ml-2" @click="is_fluid = !is_fluid"
|
||||
>mdi-file-refresh-outline</v-icon
|
||||
>
|
||||
<a class="mr-2" @click="is_fluid = !is_fluid">布局开关</a>
|
||||
|
||||
<v-icon class="ml-2" @click="share()"
|
||||
>mdi-file-refresh-outline</v-icon
|
||||
>
|
||||
<a class="mr-2" @click="share()">一键分享地址</a>
|
||||
</p>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-avatar size="60px" @click="intoInfo(discussData.user.id)">
|
||||
<img
|
||||
v-if="discussData.user != undefined"
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
discussData.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
<p v-if="discussData.user != undefined">
|
||||
作者：{{ discussData.user.username }}
|
||||
</p>
|
||||
|
||||
<p>时间：{{ discussData.time }}</p>
|
||||
<p>文章ID：{{ discussData.id }}</p>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<mavon-editor
|
||||
class="md"
|
||||
codeStyle="atom-one-dark"
|
||||
:boxShadow="false"
|
||||
previewBackground="#ffffff"
|
||||
:value="discussData.content"
|
||||
:subfield="false"
|
||||
:defaultOpen="'preview'"
|
||||
:toolbarsFlag="false"
|
||||
:editable="false"
|
||||
:scrollStyle="true"
|
||||
:ishljs="true"
|
||||
style="z-index: 1"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn text color="teal accent-4" @click="reveal = true">
|
||||
更多信息
|
||||
</v-btn>
|
||||
|
||||
<v-btn @click="agrees" class="mx-2" dark outlined color="cyan">
|
||||
<v-icon large dark> mdi-menu-up-outline </v-icon>
|
||||
{{ discussData.agree_num }}
|
||||
赞同
|
||||
</v-btn>
|
||||
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
fab
|
||||
dark
|
||||
small
|
||||
color="cyan"
|
||||
>
|
||||
<v-icon dark> mdi-credit-card-settings </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(item, index) in myPorp"
|
||||
:key="index"
|
||||
link
|
||||
@click="openCard(item.method)"
|
||||
>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
fab
|
||||
dark
|
||||
small
|
||||
color="cyan"
|
||||
@click="Collection(discussData.id)"
|
||||
>
|
||||
<v-icon dark> mdi-star </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>收藏</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
fab
|
||||
dark
|
||||
small
|
||||
color="cyan"
|
||||
@click="intoRecords"
|
||||
>
|
||||
<v-icon dark>mdi-update</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>编辑记录</span>
|
||||
</v-tooltip>
|
||||
</v-card-actions>
|
||||
|
||||
<v-expand-transition>
|
||||
<v-card
|
||||
v-if="reveal"
|
||||
class="transition-fast-in-fast-out v-card--reveal"
|
||||
style="height: 100%"
|
||||
>
|
||||
<v-card-text class="pb-0">
|
||||
<p class="display-1 text--primary">简介</p>
|
||||
<p>{{ discussData.introduction }}</p>
|
||||
</v-card-text>
|
||||
<v-card-actions class="pt-0">
|
||||
<v-btn text color="teal accent-4" @click="reveal = false">
|
||||
关闭
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
<v-card class="my-2 mb-6">
|
||||
<v-list>
|
||||
<v-subheader>评论</v-subheader>
|
||||
<v-text-field
|
||||
class="mx-6"
|
||||
ref="com"
|
||||
v-model="form.content"
|
||||
label="发表评论"
|
||||
required
|
||||
:rules="commentRules"
|
||||
@keyup.enter="sentComment()"
|
||||
>
|
||||
<v-icon slot="append" color="blue" @click="sentComment()">
|
||||
mdi-send
|
||||
</v-icon></v-text-field
|
||||
>
|
||||
|
||||
<v-list-item-group v-model="selectedItem" color="blue">
|
||||
<v-list-item v-for="(item, i) in commentList" :key="i">
|
||||
<!-- <v-list-item-icon>
|
||||
<v-avatar size="36px" @click="intoInfo(item.user.id)">
|
||||
<img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-list-item-icon> -->
|
||||
<v-list-item-content>
|
||||
<!-- <p class="light-ayan--text">
|
||||
{{ i + 1 }}楼:<br />
|
||||
作者：{{ item.user.username
|
||||
}}<v-divider class="mx-2" vertical></v-divider>发表时间：
|
||||
{{ item.time }}
|
||||
</p> -->
|
||||
|
||||
<v-list-item-title v-text="item.content"></v-list-item-title>
|
||||
<v-divider></v-divider>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
<div class="text-center mt-4 mb-12">
|
||||
<v-pagination
|
||||
v-model="pageIndex"
|
||||
:length="lenData"
|
||||
:total-visible="7"
|
||||
prev-icon="mdi-menu-left"
|
||||
next-icon="mdi-menu-right"
|
||||
circle
|
||||
color="cyan"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-dialog v-model="dialog" max-width="600px">
|
||||
<v-card class="px-6 py-4">
|
||||
<v-card-title class="headline" v-show="openIndex != 2"
|
||||
>你确定要使用此道具吗？</v-card-title
|
||||
>
|
||||
|
||||
<v-text-field
|
||||
v-show="openIndex == 2"
|
||||
v-model="mycolor"
|
||||
label="请输入颜色"
|
||||
></v-text-field>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close">取消</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="useCard">确定</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialog2" width="800">
|
||||
<v-card>
|
||||
<v-card-title class="text-h5 grey lighten-2">
|
||||
协同编辑记录
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text style="overflow-y: scroll; max-height: 600px">
|
||||
<v-timeline>
|
||||
<v-timeline-item
|
||||
v-for="(item, index) in recordList"
|
||||
:key="index"
|
||||
color="cyan lighten-1"
|
||||
fill-dot
|
||||
small
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="cyan lighten-1 justify-end">
|
||||
<v-subheader class="white--text">{{
|
||||
item.time
|
||||
}}</v-subheader>
|
||||
|
||||
<v-avatar size="42" @click="intoInfo(item.user.id)">
|
||||
<img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
<span class="white--text ml-2">
|
||||
{{ item.user.username }}</span
|
||||
>
|
||||
</v-card-title>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
{{ item.describe }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="cyan" text @click="dialog2 = false"> 关闭 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import { mavonEditor } from "mavon-editor";
|
||||
import discussApi from "@/api/discussApi";
|
||||
import commentApi from "@/api/commentApi";
|
||||
import collectionApi from "@/api/collectionApi";
|
||||
import agreesApi from "@/api/agreesApi";
|
||||
import articleApi from "@/api/articleApi";
|
||||
import recordApi from "@/api/recordApi";
|
||||
export default {
|
||||
components: {
|
||||
mavonEditor,
|
||||
},
|
||||
data: () => ({
|
||||
is_fluid: false,
|
||||
webDataString: "",
|
||||
titlArticle: [],
|
||||
titl: false,
|
||||
selectArt: [],
|
||||
recordList: [],
|
||||
dialog2: false,
|
||||
articleList: [],
|
||||
drawer: true,
|
||||
dialog: false,
|
||||
mycolor: "#212121",
|
||||
myPorp: [
|
||||
{ title: "置顶卡", method: "1" },
|
||||
{ title: "色彩卡", method: "2" },
|
||||
{ title: "匿名卡", method: "3" },
|
||||
{ title: "加密卡", method: "4" },
|
||||
],
|
||||
commentRules: [
|
||||
(v) => !!v || "评论不能为空",
|
||||
(v) => (v && v.length <= 200) || "评论必须小于200个字符",
|
||||
],
|
||||
openIndex: -1,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
discussData: {},
|
||||
commentList: [],
|
||||
reveal: false,
|
||||
selectedItem: "",
|
||||
form: {
|
||||
content: "",
|
||||
},
|
||||
}),
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
watch: {
|
||||
selectArt: {
|
||||
handler(new1, old2) {
|
||||
this.showArticle(new1[0].id);
|
||||
},
|
||||
},
|
||||
|
||||
pageIndex: {
|
||||
handler() {
|
||||
this.initializa();
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
lenData() {
|
||||
return Math.floor(this.total / this.pageSize) + 1;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
methods: {
|
||||
share() {
|
||||
const url = `${window.location.protocol}//${window.location.host}/comment/${this.$store.state.home.discussId}`;
|
||||
this.copy(url)
|
||||
alert(` ${url}\r\n 已复制至粘贴板`);
|
||||
},
|
||||
loog() {
|
||||
discussApi
|
||||
.getDiscussByDiscussId(this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
this.discussData.content = "";
|
||||
this.discussData.content += "# " + resp.data.title;
|
||||
this.discussData.content += "\n " + resp.data.content;
|
||||
|
||||
articleApi
|
||||
.getTitlArticles(this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
var that = this;
|
||||
resp.data.forEach((element) => {
|
||||
that.discussData.content += "\n\n# " + element.name;
|
||||
that.discussData.content += "\n " + element.content;
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
intoRecords() {
|
||||
recordApi
|
||||
.getRecordsByDiscussId(this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
this.recordList = resp.data;
|
||||
});
|
||||
|
||||
this.dialog2 = true;
|
||||
},
|
||||
delArticle(acticleId) {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
text: "你确定要删除该项吗？",
|
||||
title: "Warning",
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp) {
|
||||
articleApi
|
||||
.delArticleList([acticleId], this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.initializa();
|
||||
} else {
|
||||
alert("权限不足！");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
updataDiscuss(discussId) {
|
||||
this.$router.push({
|
||||
path: `/AddDiscuss`,
|
||||
query: {
|
||||
discussId: discussId,
|
||||
},
|
||||
});
|
||||
},
|
||||
intoAddArticle(parentId) {
|
||||
this.$router.push({
|
||||
path: `/addArticle`,
|
||||
query: {
|
||||
parentId: parentId,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
intoArticle(articleId) {
|
||||
this.$router.push({
|
||||
path: `/addArticle`,
|
||||
query: {
|
||||
articleId: articleId,
|
||||
},
|
||||
});
|
||||
},
|
||||
intoInfo(userId) {
|
||||
this.$router.push({
|
||||
path: `/userInfo`,
|
||||
query: {
|
||||
userId: userId,
|
||||
},
|
||||
});
|
||||
},
|
||||
Collection(Id) {
|
||||
collectionApi.addCollection(Id).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.message.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
} else {
|
||||
this.$dialog.message.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
intoAdd() {
|
||||
this.$router.push({ path: "/addDisucss" });
|
||||
},
|
||||
intoAdd2() {
|
||||
this.$router.push({ path: "/addArticle" });
|
||||
},
|
||||
showArticle(id) {
|
||||
articleApi.getArticleById(id).then((resp) => {
|
||||
this.discussData.content = resp.data.content;
|
||||
});
|
||||
},
|
||||
getInfo() {
|
||||
articleApi
|
||||
.getArticlesByDiscussId(this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
this.articleList = resp.data;
|
||||
});
|
||||
|
||||
discussApi
|
||||
.getDiscussByDiscussId(this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
this.discussData = resp.data;
|
||||
this.discussData.content = this.discussData.content;
|
||||
});
|
||||
commentApi
|
||||
.getCommentsByDiscussId(
|
||||
this.$store.state.home.discussId,
|
||||
this.pageIndex
|
||||
)
|
||||
.then((resp) => {
|
||||
this.commentList = resp.data.items;
|
||||
this.pageSize = 10;
|
||||
this.total = resp.data.total;
|
||||
});
|
||||
},
|
||||
copy(text)
|
||||
{
|
||||
|
||||
var tag = document.createElement('input');
|
||||
tag.setAttribute('id', 'cp_hgz_input');
|
||||
tag.value = text;
|
||||
document.getElementsByTagName('body')[0].appendChild(tag);
|
||||
document.getElementById('cp_hgz_input').select();
|
||||
document.execCommand('copy');
|
||||
document.getElementById('cp_hgz_input').remove();
|
||||
|
||||
},
|
||||
initializa() {
|
||||
if (this.$route.params.discussId != undefined) {
|
||||
discussApi
|
||||
.GetPlateInfoBydiscussId(this.$route.params.discussId)
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$store.dispatch("set_plateId", resp.data.id);
|
||||
this.$store.dispatch("set_plateString", resp.data.name);
|
||||
this.$store.dispatch(
|
||||
"set_discussId",
|
||||
this.$route.params.discussId
|
||||
);
|
||||
this.getInfo();
|
||||
} else {
|
||||
alert(resp.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getInfo();
|
||||
}
|
||||
},
|
||||
agrees() {
|
||||
agreesApi.getAgrees(this.$store.state.home.discussId).then((resp) => {
|
||||
if (resp.data > this.discussData.agree_num) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
}
|
||||
this.discussData.agree_num = resp.data;
|
||||
});
|
||||
},
|
||||
|
||||
sentComment() {
|
||||
if (this.$refs.com.validate()) {
|
||||
commentApi
|
||||
.addComment(this.form, this.$store.state.home.discussId)
|
||||
.then((resp) => {
|
||||
//设置等级
|
||||
this.$store.dispatch("setLevel", resp.data.level);
|
||||
|
||||
this.form.content = "";
|
||||
this.initializa();
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
openCard(index) {
|
||||
this.openIndex = index;
|
||||
this.dialog = true;
|
||||
},
|
||||
close() {
|
||||
this.openIndex = -1;
|
||||
this.dialog = false;
|
||||
this.mycolor = "#212121";
|
||||
},
|
||||
useCard() {
|
||||
if (this.openIndex == -1) {
|
||||
return 0;
|
||||
}
|
||||
discussApi
|
||||
.UpdatePorp(this.discussData.id, this.openIndex, this.mycolor)
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
|
||||
this.close();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.v-card--reveal {
|
||||
bottom: 0;
|
||||
opacity: 1 !important;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
251
Yi.BBS.Vue2/src/views/user/discuss.vue
Normal file
251
Yi.BBS.Vue2/src/views/user/discuss.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<v-container fluid >
|
||||
<v-row >
|
||||
<v-col class="pb-0">
|
||||
<v-card height="100%" class="mx-auto">
|
||||
<v-navigation-drawer right app v-model="drawer">
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn color="cyan" elevation="2" @click="intoAdd" large dark>
|
||||
添加主题
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list dense nav>
|
||||
<v-list-item
|
||||
v-for="myitem in items"
|
||||
:key="myitem.title"
|
||||
link
|
||||
@click="orderby(myitem.id)"
|
||||
>
|
||||
<v-list-item-icon>
|
||||
<v-icon>{{ myitem.icon }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ myitem.title }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="elevation-2 mt-3">
|
||||
<v-row>
|
||||
<v-col cols="4" md="6">
|
||||
<div class="text-h5 title pt-6">
|
||||
<v-icon class="mx-2" @click="drawer = !drawer">mdi-menu</v-icon>
|
||||
{{this.$store.state.home.plateString}}
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="8" md="6">
|
||||
<v-text-field label="搜索">
|
||||
<v-icon slot="append" color="red">
|
||||
mdi-plus
|
||||
</v-icon></v-text-field
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-container>
|
||||
<v-expansion-panels inset focusable>
|
||||
<v-expansion-panel
|
||||
class="p-1"
|
||||
v-for="(item, i) in discussList"
|
||||
:key="i"
|
||||
>
|
||||
<v-expansion-panel-header>
|
||||
<v-row align="center" class="spacer" no-gutters>
|
||||
<v-col cols="1" sm="1" md="1">
|
||||
<v-avatar size="36px " @click="intoInfo(item.user.id)">
|
||||
<!-- <img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/> -->
|
||||
</v-avatar>
|
||||
<br />
|
||||
<!-- <span class="ml-2"> {{ item.user.username }}</span> -->
|
||||
</v-col>
|
||||
<v-col cols="6" sm="5" md="8" :style="{'color':item.color}">
|
||||
<span @click="intoComment(item.id)">[{{ item.types }}] {{ item.title }}</span>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="4" sm="5" md="2">
|
||||
<v-subheader>
|
||||
{{ item.time }}<br />
|
||||
{{ item.see_num }}阅览 | {{ item.agree_num }}点赞
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="1" sm="1" md="1">
|
||||
<v-btn
|
||||
fab
|
||||
small
|
||||
dark
|
||||
color="blue"
|
||||
@click="intoComment(item.id)"
|
||||
>
|
||||
<v-icon dark> mdi-login </v-icon>
|
||||
</v-btn>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <v-col cols="12" >
|
||||
<v-subheader class="mr-2">
|
||||
{{ item.time }} 发布 | {{ item.see_num }}阅览 | {{ item.agree_num }}点赞
|
||||
</v-subheader>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-expansion-panel-header>
|
||||
|
||||
<v-expansion-panel-content>
|
||||
{{ item.introduction }}
|
||||
<div class="mt-2">
|
||||
<v-btn
|
||||
class="mr-2"
|
||||
fab
|
||||
small
|
||||
dark
|
||||
color="blue"
|
||||
@click="intoComment(item.id)"
|
||||
>
|
||||
<v-icon dark> mdi-login </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark> mdi-close </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark> mdi-close </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark @click="Collection(item.id)">
|
||||
mdi-star
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="text-center mt-4 mb-10">
|
||||
<v-pagination
|
||||
color="cyan"
|
||||
v-model="pageIndex"
|
||||
:length="lenData"
|
||||
:total-visible="7"
|
||||
prev-icon="mdi-menu-left"
|
||||
next-icon="mdi-menu-right"
|
||||
circle
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import discussApi from "@/api/discussApi";
|
||||
import collectionApi from "@/api/collectionApi";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderbyId: 0,
|
||||
drawer: "true",
|
||||
items: [
|
||||
{ title: "最新主题", icon: "mdi-eye", id: "0" },
|
||||
{ title: "最热主题", icon: "mdi-brightness-7", id: "1" },
|
||||
{ title: "推荐主题", icon: "mdi-bullhorn-outline", id: "2" },
|
||||
],
|
||||
baseurl: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
discussList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
pageIndex: {
|
||||
handler() {
|
||||
this.initializa();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
computed: {
|
||||
lenData() {
|
||||
return Math.floor(this.total / this.pageSize) + 1;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
Collection(Id) {
|
||||
collectionApi.addCollection(Id).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.message.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
} else {
|
||||
this.$dialog.message.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
intoInfo(userId) {
|
||||
this.$router.push({
|
||||
path: `/userInfo`,
|
||||
query: {
|
||||
userId: userId,
|
||||
},
|
||||
});
|
||||
},
|
||||
initializa() {
|
||||
//初始化创建
|
||||
discussApi
|
||||
.getDiscussByPlateId(
|
||||
this.$store.state.home.plateId,
|
||||
this.pageIndex,
|
||||
this.orderbyId
|
||||
)
|
||||
.then((resp) => {
|
||||
this.discussList =resp.data.items;
|
||||
this.total = resp.data.total;
|
||||
this.pageSize =10;
|
||||
});
|
||||
},
|
||||
intoAdd() {
|
||||
this.$router.push({ path: "/addDiscuss" });
|
||||
},
|
||||
orderby(itemId) {
|
||||
this.orderbyId = itemId;
|
||||
this.initializa();
|
||||
},
|
||||
intoComment(discussId) {
|
||||
this.$store.dispatch("set_discussId", discussId);
|
||||
this.$router.push({ path: "/comment" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
316
Yi.BBS.Vue2/src/views/user/friend.vue
Normal file
316
Yi.BBS.Vue2/src/views/user/friend.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12" md="8">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<p class="title text--secondary">好友列表</p>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="好友搜索" prepend-inner-icon="mdi-magnify">
|
||||
<v-icon slot="append" color="cyan"> mdi-send </v-icon>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<p v-show="showFriend" class="text-center text--secondary">
|
||||
空空如也，快快添加你的好友吧！
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
v-for="(item, index) in friendList"
|
||||
:key="index"
|
||||
>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
color="cyan"
|
||||
dark
|
||||
:elevation="hover ? 12 : 2"
|
||||
>
|
||||
<v-card-title>
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<v-icon large left> mdi-account-circle </v-icon></v-col
|
||||
>
|
||||
|
||||
<v-col cols="8" class="text-center">
|
||||
<span class="text-h8 font-weight-light">{{
|
||||
item.user.username
|
||||
}}</span></v-col
|
||||
>
|
||||
|
||||
<v-col cols="2">
|
||||
<v-icon @click="openItem(item.id)"> mdi-close </v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="text-h7 font-weight-bold">
|
||||
"{{ item.user.user_extra.introduction }}"
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-list-item class="grow">
|
||||
<v-list-item-avatar color="grey darken-3">
|
||||
<v-avatar size="36px " @click="intoInfo(item.user.id)">
|
||||
<img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{
|
||||
item.user.nick
|
||||
}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-row align="center" justify="end">
|
||||
<div>
|
||||
<v-icon class="mr-1"> mdi-close </v-icon>
|
||||
<span class="subheading mr-2">聊天</span>
|
||||
</div>
|
||||
|
||||
<span class="mr-1">·</span>
|
||||
<div>
|
||||
<v-icon class="mr-1"> mdi-close </v-icon>
|
||||
<span class="subheading">赠礼</span>
|
||||
</div>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<p class="title text--secondary">请求列表</p>
|
||||
</v-col>
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-btn width="100%" color="cyan" dark @click="openAdd()"
|
||||
>添加好友</v-btn
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<p v-show="showNoit" class="text-center text--secondary">
|
||||
空空如也，暂无请求！
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
v-for="(item, index) in friendNoticeList"
|
||||
:key="index"
|
||||
>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
color="cyan"
|
||||
dark
|
||||
:elevation="hover ? 12 : 2"
|
||||
>
|
||||
<v-card-title>
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<v-icon large left> mdi-account-circle </v-icon></v-col
|
||||
>
|
||||
|
||||
<v-col cols="8" class="text-center">
|
||||
<span class="text-h8 font-weight-light">{{
|
||||
item.user.username
|
||||
}}</span></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="text-h7 font-weight-bold">
|
||||
"{{ item.user.user_extra.introduction }}"
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-list-item class="grow">
|
||||
<v-list-item-avatar color="grey darken-3">
|
||||
<v-avatar size="36px " @click="intoInfo(item.user.id)">
|
||||
<img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{
|
||||
item.user.nick
|
||||
}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-row align="center" justify="end">
|
||||
<div @click="updateFriend(item.id)">
|
||||
<v-icon class="mr-1">
|
||||
mdi-account-multiple-check
|
||||
</v-icon>
|
||||
<span class="subheading mr-2">同意</span>
|
||||
</div>
|
||||
<span class="mr-1">·</span>
|
||||
<div @click="openItem(item.id)">
|
||||
<v-icon class="mr-1">
|
||||
mdi-account-multiple-remove
|
||||
</v-icon>
|
||||
<span class="subheading">拒绝</span>
|
||||
</div>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline">你确定要删除该项吗？</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close">取消</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="delFriend()">确定</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="addDialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">添加好友</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field v-model="editName" label="用户名"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeAdd"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="addFriend"> 添加 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import friendApi from "@/api/friendApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
friendList: [],
|
||||
friendNoticeList: [],
|
||||
baseurl: "",
|
||||
editId: 0,
|
||||
dialog: false,
|
||||
addDialog: false,
|
||||
editName: "",
|
||||
showFriend: false,
|
||||
showNoit: false,
|
||||
}),
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
methods: {
|
||||
intoInfo(userId) {
|
||||
this.$router.push({
|
||||
path: `/userInfo`,
|
||||
query: {
|
||||
userId: userId,
|
||||
},
|
||||
});
|
||||
},
|
||||
initializa() {
|
||||
friendApi.GetFriends().then((resp) => {
|
||||
if (resp.data.length == 0) {
|
||||
this.showFriend = true;
|
||||
}
|
||||
this.friendList = resp.data;
|
||||
});
|
||||
|
||||
friendApi.GetFriendsNotice().then((resp) => {
|
||||
if (resp.data.length == 0) {
|
||||
this.showNoit = true;
|
||||
}
|
||||
this.friendNoticeList = resp.data;
|
||||
});
|
||||
},
|
||||
openItem(id) {
|
||||
this.editId = id;
|
||||
this.dialog = true;
|
||||
},
|
||||
openAdd() {
|
||||
this.addDialog = true;
|
||||
},
|
||||
close() {
|
||||
this.editId = 0;
|
||||
this.dialog = false;
|
||||
},
|
||||
closeAdd() {
|
||||
(this.editName = ""), (this.addDialog = false);
|
||||
},
|
||||
delFriend() {
|
||||
friendApi.delFriendList([this.editId]).then((resp) => {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
this.close();
|
||||
this.initializa();
|
||||
});
|
||||
},
|
||||
updateFriend(id) {
|
||||
friendApi.UpdateFriend(id).then((resp) => {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
this.initializa();
|
||||
});
|
||||
},
|
||||
addFriend() {
|
||||
friendApi.AddFriend(this.editName).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
}
|
||||
this.closeAdd();
|
||||
this.initializa();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
34
Yi.BBS.Vue2/src/views/user/my.vue
Normal file
34
Yi.BBS.Vue2/src/views/user/my.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-container class="text-center">
|
||||
|
||||
<v-btn
|
||||
class="m-2"
|
||||
fab
|
||||
dark
|
||||
large
|
||||
color="purple"
|
||||
@click="mylink()"
|
||||
>
|
||||
<v-icon dark>
|
||||
mdi-android
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-app>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
mylink() {
|
||||
const mylink=this.$route.params.mylink
|
||||
var tempwindow=window.open();
|
||||
tempwindow.location=mylink;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
340
Yi.BBS.Vue2/src/views/user/myDiscuss.vue
Normal file
340
Yi.BBS.Vue2/src/views/user/myDiscuss.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline"
|
||||
>你确定要删除此条记录吗？</v-card-title
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="closeDelete"
|
||||
>取消</v-btn
|
||||
>
|
||||
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
|
||||
>确定</v-btn
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">添加标签</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<!-- 【1】这里设置对应的编辑框名 -->
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="form.name"
|
||||
label="标签名"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="form.color"
|
||||
label="文字颜色"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
v-model="form.color_bg"
|
||||
label="背景颜色"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-col class="pb-0">
|
||||
<v-card height="100%" class="mx-auto">
|
||||
<v-navigation-drawer right app v-model="drawer"
|
||||
>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
v-if="my"
|
||||
color="cyan"
|
||||
elevation="2"
|
||||
@click="Add"
|
||||
large
|
||||
dark
|
||||
>
|
||||
添加标签
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list dense nav>
|
||||
<v-list-item link @click="initializa()">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="text-center">
|
||||
<v-chip> <v-icon> mdi-star </v-icon> 全部</v-chip>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
v-for="myitem in items"
|
||||
:key="myitem.id"
|
||||
link
|
||||
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="text-center">
|
||||
<v-chip
|
||||
|
||||
@click="selctDiscuss(myitem.id)"
|
||||
|
||||
:style="{
|
||||
backgroundColor: myitem.color_bg,
|
||||
color: myitem.color,
|
||||
}"
|
||||
>{{ myitem.name }}
|
||||
<v-icon v-if="my" @click="deleteItem(myitem.id)">mdi-close-circle</v-icon>
|
||||
|
||||
</v-chip
|
||||
>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="elevation-2 mt-3">
|
||||
<v-row>
|
||||
<v-col cols="4" md="6">
|
||||
<div class="text-h5 title pt-6"><v-icon class="mx-2" @click="drawer = !drawer">mdi-menu</v-icon>我的</div>
|
||||
</v-col>
|
||||
<v-col cols="8" md="6">
|
||||
<v-text-field label="搜索">
|
||||
<v-icon slot="append" color="red">
|
||||
mdi-plus
|
||||
</v-icon></v-text-field
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-container>
|
||||
<v-expansion-panels inset focusable>
|
||||
<v-expansion-panel
|
||||
class="p-1"
|
||||
v-for="(item, i) in discussList"
|
||||
:key="i"
|
||||
>
|
||||
<v-expansion-panel-header>
|
||||
<v-row align="center" class="spacer" no-gutters>
|
||||
<v-col cols="2" sm="1" md="1">
|
||||
<v-avatar size="36px " @click="intoInfo(item.user.id)">
|
||||
<img
|
||||
alt="Avatar"
|
||||
:src="
|
||||
baseurl +
|
||||
'/File/ShowNoticeImg?filePath=' +
|
||||
item.user.icon
|
||||
"
|
||||
/>
|
||||
</v-avatar>
|
||||
<br>
|
||||
<span class="ml-2"> {{ item.user.username }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="5" md="8" :style="{'color':item.color}">
|
||||
[{{ item.type }}] {{ item.title }}
|
||||
</v-col>
|
||||
|
||||
<v-col cols="4" sm="5" md="3">
|
||||
<v-subheader>
|
||||
{{ item.time }} 发布 <br />
|
||||
{{item.see_num}}阅览 | {{item.agree_num}}点赞 </v-subheader
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
|
||||
<v-expansion-panel-content>
|
||||
{{ item.introduction }}
|
||||
<div class="mt-2">
|
||||
<v-btn
|
||||
class="mr-2"
|
||||
fab
|
||||
small
|
||||
dark
|
||||
color="blue"
|
||||
@click="intoComment(item.id, item.plate.id)"
|
||||
>
|
||||
<v-icon dark > mdi-login </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark> mdi-format-list-bulleted-square </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark > mdi-pencil </v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="mx-2" fab dark small color="cyan">
|
||||
<v-icon dark > mdi-android </v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="text-center mt-4 mb-10">
|
||||
<v-pagination
|
||||
v-model="pageIndex"
|
||||
:length="lenData"
|
||||
:total-visible="7"
|
||||
prev-icon="mdi-menu-left"
|
||||
next-icon="mdi-menu-right"
|
||||
circle
|
||||
color="cyan"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import discussApi from "@/api/discussApi";
|
||||
import labelApi from "@/api/labelApi";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
my:false,
|
||||
drawer:"true",
|
||||
dialogDelete: false,
|
||||
delId: 0,
|
||||
dialog: false,
|
||||
form: {
|
||||
color: "",
|
||||
color_bg: "",
|
||||
name: "",
|
||||
},
|
||||
defaultForm: {
|
||||
color: "",
|
||||
color_bg: "",
|
||||
name: "",
|
||||
},
|
||||
items: [],
|
||||
plateId: "",
|
||||
baseurl: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
discussList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
pageIndex: {
|
||||
handler() {
|
||||
this.initializa();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
computed: {
|
||||
lenData() {
|
||||
return Math.floor(this.total / this.pageSize) + 1;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initializa() {
|
||||
|
||||
if (this.$route.query.userId==undefined||this.$route.query.userId == this.$store.state.user.user.id) {
|
||||
//表示是自己的用户
|
||||
this.my = true;
|
||||
|
||||
}
|
||||
|
||||
labelApi.getLabelByUserId(this.$route.query.userId).then((resp) => {
|
||||
this.items = resp.data;
|
||||
});
|
||||
|
||||
//初始化创建
|
||||
discussApi.getDiscussByUserId(this.$route.query.userId,this.pageIndex).then((resp) => {
|
||||
this.discussList = resp.data.pageData;
|
||||
this.total = resp.data.total;
|
||||
this.pageSize = resp.data.pageSize;
|
||||
});
|
||||
},
|
||||
selctDiscuss(id) {
|
||||
labelApi.getDiscussByLabelId(this.$route.query.userId,this.pageIndex, id).then((resp) => {
|
||||
this.discussList = resp.data.pageData;
|
||||
this.total = resp.data.total;
|
||||
this.pageSize = resp.data.pageSize;
|
||||
});
|
||||
},
|
||||
|
||||
deleteItem(id) {
|
||||
this.delId = id;
|
||||
this.dialogDelete = true;
|
||||
},
|
||||
|
||||
deleteItemConfirm() {
|
||||
labelApi.delLabelList([this.delId]).then(() => this.initializa());
|
||||
this.closeDelete();
|
||||
},
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
},
|
||||
|
||||
Add() {
|
||||
this.dialog = true;
|
||||
},
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.form = Object.assign({}, this.defaultForm);
|
||||
});
|
||||
},
|
||||
save() {
|
||||
labelApi.addLabelByUserId(this.form).then(() => this.initializa());
|
||||
this.close();
|
||||
},
|
||||
intoComment(discussId, plateId) {
|
||||
this.$store.dispatch("set_plateId", plateId);
|
||||
this.$store.dispatch("set_discussId", discussId);
|
||||
this.$router.push({ path: "/comment" });
|
||||
},
|
||||
intoInfo(userId) {
|
||||
this.$router.push({
|
||||
path: `/userInfo`,
|
||||
query: {
|
||||
userId: userId,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
99
Yi.BBS.Vue2/src/views/user/shop.vue
Normal file
99
Yi.BBS.Vue2/src/views/user/shop.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-center" v-show="is_null">
|
||||
商城货物已被购空。。。。。。<br />
|
||||
请等待新货物上架
|
||||
</v-col>
|
||||
<v-col v-for="(item, index) in form" :key="index" cols="6" sm="6" md="3">
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card :elevation="hover ? 12 : 2" class="pa-4">
|
||||
<v-icon class="ml-4 mb-2" large :color="item.prop.color">
|
||||
{{ item.prop.logo }}
|
||||
</v-icon>
|
||||
{{ item.prop.name }}
|
||||
|
||||
<br />
|
||||
<v-subheader>{{ item.prop.introduction }}</v-subheader>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<p class="mt-2">原价：{{ item.price }}</p>
|
||||
|
||||
<p>折扣：{{ item.discount }}</p>
|
||||
<p>折后价格：{{ item.real_price }}</p>
|
||||
<span class="float-right">剩余数量：{{ item.number }}</span>
|
||||
<v-divider></v-divider>
|
||||
<v-btn class="mt-2" dark @click="openBuy(item.id)" color="cyan"
|
||||
>购买</v-btn
|
||||
>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 删除提示框 -->
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline">你确定要购买该道具吗？</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close">取消</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="buy">确定</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import shopApi from "@/api/shopApi";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
shopId: 0,
|
||||
is_null: false,
|
||||
form: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
methods: {
|
||||
openBuy(id) {
|
||||
this.shopId = id;
|
||||
this.dialog = true;
|
||||
},
|
||||
close() {
|
||||
this.shopId = 0;
|
||||
this.dialog = false;
|
||||
},
|
||||
buy() {
|
||||
shopApi.BuyShop(this.shopId).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
}
|
||||
this.close();
|
||||
this.initializa();
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
initializa() {
|
||||
shopApi.getShops().then((resp) => {
|
||||
if (resp.data.length == 0) {
|
||||
this.is_null = true;
|
||||
}
|
||||
this.form = resp.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
167
Yi.BBS.Vue2/src/views/user/theme.vue
Normal file
167
Yi.BBS.Vue2/src/views/user/theme.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container fluid>
|
||||
<v-card class="pa-8">
|
||||
<p class="mb-4 text-h6 text--secondary">样式设置</p>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="9" md="10">
|
||||
<p class="my-4 ml-4 text-h7 font-weight-bold">深色模式</p>
|
||||
<v-subheader>开启后，样式将变更为深色</v-subheader>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3" md="2">
|
||||
<v-switch inset v-model="$vuetify.theme.dark" ></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="9" md="10">
|
||||
<p class="my-4 ml-4 text-h7 font-weight-bold">核心主题</p>
|
||||
<v-subheader>可修改相当核心主题颜色</v-subheader>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3" md="2">
|
||||
<v-btn class="mt-4" dark @click="openDialog(1)" color="cyan">修改</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="9" md="10">
|
||||
<p class="my-4 ml-4 text-h7 font-weight-bold">次要主题</p>
|
||||
<v-subheader>可修改当前次要主题颜色</v-subheader>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3" md="2">
|
||||
<v-btn class="mt-4" dark @click="openDialog(2)" color="blue">修改</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider></v-divider>
|
||||
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-col cols="9" md="10">
|
||||
<p class="my-4 ml-4 text-h7 font-weight-bold">语言</p>
|
||||
<v-subheader>可切语言，仅限已翻译过部分</v-subheader>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3" md="2">
|
||||
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="cyan"
|
||||
dark
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="mt-4"
|
||||
>
|
||||
修改
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
@click="updateLang(item.id)"
|
||||
>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
fullscreen
|
||||
hide-overlay
|
||||
transition="dialog-bottom-transition"
|
||||
>
|
||||
<v-card class="text-center align-center">
|
||||
<v-toolbar dark color="blue">
|
||||
<v-btn icon dark @click="dialog = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title>色彩提取</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<v-btn dark text @click="save"> 保存 </v-btn>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
|
||||
<v-color-picker
|
||||
class="mx-auto mt-8"
|
||||
dot-size="25"
|
||||
show-swatches
|
||||
width="500"
|
||||
swatches-max-height="200"
|
||||
v-model="color1"
|
||||
mode="rgba"
|
||||
></v-color-picker>
|
||||
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{id:1, title: '简体中文' },
|
||||
{id:2, title: 'English' },
|
||||
{id:3, title: '日本語' },
|
||||
],
|
||||
dialog: false,
|
||||
notifications: false,
|
||||
sound: true,
|
||||
widgets: false,
|
||||
color1: "",
|
||||
open:0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateLang(id)
|
||||
{
|
||||
var lang="zhHans";
|
||||
switch(id)
|
||||
{
|
||||
case 1: break;
|
||||
case 2: lang='en'; break;
|
||||
case 3: lang='ja'; break;
|
||||
}
|
||||
this.$vuetify.lang.current=lang;
|
||||
},
|
||||
|
||||
openDialog(id) {
|
||||
this.open=id;
|
||||
this.dialog = true;
|
||||
},
|
||||
save() {
|
||||
var cor = this.color1.substr(0, 7);
|
||||
switch(this.open)
|
||||
{
|
||||
case 1: this.$vuetify.theme.themes.light.cyan = cor;break;
|
||||
case 2:this.$vuetify.theme.themes.light.blue = cor;break;
|
||||
}
|
||||
this.$vuetify.theme.dark=true;
|
||||
this.$vuetify.theme.dark=false;
|
||||
this.dialog=false;
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
394
Yi.BBS.Vue2/src/views/user/userInfo.vue
Normal file
394
Yi.BBS.Vue2/src/views/user/userInfo.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-tabs v-model="tab">
|
||||
<v-tab href="#tab-1">
|
||||
账户信息
|
||||
<v-icon>mdi-phone</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-2">
|
||||
额外信息
|
||||
<v-icon>mdi-account-box</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-card>
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item :value="'tab-2'">
|
||||
<v-card class="mx-auto">
|
||||
<v-card-text>
|
||||
<div>Extra Information</div>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-list two-line>
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="indigo"> mdi-phone </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>等级：</v-list-item-title>
|
||||
<v-list-item-subtitle>{{
|
||||
form.user_extra.level
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-message-text</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>经验：</v-list-item-title>
|
||||
<v-list-item-subtitle>{{
|
||||
form.user_extra.experience
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-message-text</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="indigo"> mdi-lock </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>拥有角色：</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(item, index) in roleList"
|
||||
:key="index"
|
||||
cols="6"
|
||||
sm="3"
|
||||
md="1"
|
||||
>{{ item.role_name }}</v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>拥有权限：</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(item, index) in actionList"
|
||||
:key="index"
|
||||
cols="6"
|
||||
sm="3"
|
||||
md="1"
|
||||
>{{ item.action_name }}</v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="indigo"> mdi-email </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>发帖总数：</v-list-item-title>
|
||||
<v-list-item-subtitle>{{
|
||||
form.user_extra.num_release
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>评论总数：</v-list-item-title>
|
||||
<v-list-item-subtitle>{{
|
||||
form.user_extra.num_reply
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
dark
|
||||
color="cyan"
|
||||
@click="intoMyDiscuss()"
|
||||
class="ml-0"
|
||||
dense
|
||||
>
|
||||
查看主题
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider inset></v-divider>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="2">
|
||||
<v-card-actions> </v-card-actions>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item :value="'tab-1'">
|
||||
<v-card class="mx-auto">
|
||||
<v-card-text>
|
||||
<div>Basic Information</div>
|
||||
<v-row>
|
||||
<v-col cols="12" md="2" class="text-center align-center">
|
||||
<v-avatar size="100" class="elevation-4 mt-5">
|
||||
<img :src="imgurl" />
|
||||
</v-avatar>
|
||||
<br />
|
||||
<input
|
||||
type="file"
|
||||
ref="imgFile"
|
||||
@change="uploadImage()"
|
||||
class="d-none"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="my"
|
||||
dark
|
||||
color="cyan"
|
||||
@click="choiceImg"
|
||||
class="mt-4 mx-2"
|
||||
>
|
||||
编辑头像
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-if="my"
|
||||
dark
|
||||
color="cyan"
|
||||
class="mt-4"
|
||||
@click="qqUpdate"
|
||||
>
|
||||
绑定QQ
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="form.username"
|
||||
label="用户名"
|
||||
disabled
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.nick"
|
||||
required
|
||||
:counter="10"
|
||||
label="昵称"
|
||||
:disabled="!my"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.email"
|
||||
required
|
||||
label="邮箱"
|
||||
disabled
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.user_extra.introduction"
|
||||
required
|
||||
label="简介"
|
||||
:counter="50"
|
||||
:disabled="!my"
|
||||
></v-text-field>
|
||||
|
||||
<v-divider class="my-8"></v-divider>
|
||||
<div v-if="my">
|
||||
<p>修改密码</p>
|
||||
<v-text-field
|
||||
v-model="form.password"
|
||||
label="原密码"
|
||||
outlined
|
||||
clearable
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="password_new"
|
||||
required
|
||||
:counter="120"
|
||||
label="新密码"
|
||||
:disabled="en_new"
|
||||
></v-text-field>
|
||||
<v-card-actions>
|
||||
<v-btn dark color="cyan" class="mr-2" @click="clear()">
|
||||
清除
|
||||
</v-btn>
|
||||
<v-btn dark color="cyan" @click="send()"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import userApi from "@/api/userApi";
|
||||
import myqq from "../../utils/myqq";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
actionList: [],
|
||||
roleList: [],
|
||||
my: false, //判定打开的是否是自己的用户
|
||||
baseurl: "", ///prod-apis或发展模式的基础前缀
|
||||
imgurl: "", ///baseurl+图片名
|
||||
en_new: true, //密码框是否能输入
|
||||
password_new: "",
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
icon: "",
|
||||
email: "",
|
||||
user_extra: {
|
||||
experience: 0,
|
||||
introduction: "",
|
||||
level: 0,
|
||||
num_reply: 0,
|
||||
num_release: 0,
|
||||
},
|
||||
},
|
||||
tab: null,
|
||||
picker: new Date().toISOString().substr(0, 10),
|
||||
picker2: null,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
//深度监听，可监听到对象、数组的变化
|
||||
handler(val, oldVal) {
|
||||
if (val.password == "") {
|
||||
this.en_new = true;
|
||||
this.form.password_new = "";
|
||||
} else {
|
||||
this.en_new = false;
|
||||
}
|
||||
},
|
||||
deep: true, //true 深度监听
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 深刻理解一下文件上传：
|
||||
// <input type="file" ref="imgFile" @change="uploadImage()" class="d-none" />
|
||||
// <v-btn dark color="cyan" @click="choiceImg" class="mt-4">编辑</v-btn>
|
||||
// choiceImg：触发input点击事件，这个要绑定要按钮单机事件上
|
||||
// uploadImage：发送图片过去，这个要绑定要@change上，当有东西改变
|
||||
|
||||
// 通过ref获取文件，然后通过axios发送文件给后端，后端返回一个回调地址，前端解析一下换成图片和文件名
|
||||
qqUpdate() {
|
||||
QC.Login.showPopup(myqq.myqqUpdate);
|
||||
},
|
||||
choiceImg() {
|
||||
this.$refs.imgFile.dispatchEvent(new MouseEvent("click"));
|
||||
},
|
||||
uploadImage() {
|
||||
const file = this.$refs.imgFile.files[0];
|
||||
let formData = new FormData();
|
||||
formData.append("img", file);
|
||||
axios
|
||||
.post(this.baseurl + "/File/OnPostUploadImage", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then((resp) => {
|
||||
this.imgurl = resp.data.data[0].url.replace("#", this.baseurl);
|
||||
|
||||
const stringList = this.imgurl.split("=");
|
||||
this.form.icon = stringList[1];
|
||||
});
|
||||
},
|
||||
intoMyDiscuss() {
|
||||
this.$router.push({
|
||||
path: `/myDiscuss`,
|
||||
query: {
|
||||
userId: this.$route.query.userId,
|
||||
},
|
||||
});
|
||||
},
|
||||
initializa() {
|
||||
if (
|
||||
this.$route.query.userId == undefined ||
|
||||
this.$route.query.userId ==0||
|
||||
this.$route.query.userId == this.$store.state.user.user.id
|
||||
) {
|
||||
//表示是自己的用户
|
||||
this.my = true;
|
||||
}
|
||||
|
||||
userApi.getUserByUserId(this.$route.query.userId).then((resp) => {
|
||||
this.form = resp.data;
|
||||
this.imgurl =
|
||||
this.baseurl + "/File/ShowNoticeImg?filePath=" + this.form.icon;
|
||||
});
|
||||
|
||||
userApi.getRoleByuserId(this.$route.query.userId).then((resp) => {
|
||||
this.roleList = resp.data;
|
||||
});
|
||||
userApi.getActionByUserId(this.$route.query.userId).then((resp) => {
|
||||
this.actionList = resp.data;
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
this.form.username = "";
|
||||
this.form.password = "";
|
||||
this.password_new = "";
|
||||
this.form.user_extra.introduction = "";
|
||||
},
|
||||
|
||||
send() {
|
||||
this.form.password_new = this.password_new;
|
||||
userApi.tryUpdateUser(this.form).then((resp) => {
|
||||
if (resp.status) {
|
||||
//同时更新一下store
|
||||
|
||||
this.$store.dispatch("setIcon", this.form.icon);
|
||||
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
this.clear();
|
||||
this.initializa();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
47
Yi.BBS.Vue2/src/views/user/version.vue
Normal file
47
Yi.BBS.Vue2/src/views/user/version.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-timeline>
|
||||
<v-timeline-item
|
||||
v-for="(item,key) in form"
|
||||
:key="key"
|
||||
:color="item.color"
|
||||
large
|
||||
>
|
||||
<template v-slot:opposite>
|
||||
<span>2020/10/01 10:21:51</span>
|
||||
</template>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card :elevation="hover ? 12 : 2">
|
||||
<v-card-title class="headline">
|
||||
{{item.ver}}
|
||||
</v-card-title>
|
||||
<v-card-text v-html="item.context">
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import versionApi from "@/api/versionApi";
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
form:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.initializa();
|
||||
},
|
||||
methods:{
|
||||
initializa() {
|
||||
versionApi.getVersions().then(resp=>{
|
||||
this.form= resp.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
51
Yi.BBS.Vue2/src/views/user/warehouse.vue
Normal file
51
Yi.BBS.Vue2/src/views/user/warehouse.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-center" v-show="is_null">
|
||||
你的仓库，空空如也。。。。。。<br>
|
||||
请前往商城购买
|
||||
</v-col>
|
||||
<v-col v-for="(item,index) in form" :key="index" cols="6" sm="6" md="3">
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card :elevation="hover ? 12 : 2" class="pa-4 pb-8">
|
||||
<v-icon class="ml-4 mb-2" large :color="item.prop.color">
|
||||
{{item.prop.logo}}
|
||||
</v-icon>
|
||||
{{item.prop.name}}
|
||||
|
||||
<br />
|
||||
<v-subheader
|
||||
>{{item.prop.introduction}}</v-subheader
|
||||
>
|
||||
<span class="float-right">数量：{{item.number}}</span>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import warehouseApi from "@/api/warehouseApi";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
is_null:false,
|
||||
form: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initializa();
|
||||
},
|
||||
methods: {
|
||||
initializa() {
|
||||
warehouseApi.GetWarehousesByUserId().then((resp) => {
|
||||
if(resp.data.length==0)
|
||||
{
|
||||
this.is_null=true;
|
||||
}
|
||||
this.form = resp.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user
