Dashboard完成、Resources编辑完成
This commit is contained in:
7
tonecn/src/components/Console/Blogs.vue
Normal file
7
tonecn/src/components/Console/Blogs.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<template>
|
||||
|
||||
|
||||
</template>
|
||||
179
tonecn/src/components/Console/Resources.vue
Normal file
179
tonecn/src/components/Console/Resources.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { request } from '../../lib/request'
|
||||
import { ElMessage } from 'element-plus';
|
||||
onMounted(async () => {
|
||||
await loadTableData();
|
||||
})
|
||||
const loadTableData = async () => {
|
||||
try {
|
||||
let resourcesRes = await request.get('/console/resources')
|
||||
if (resourcesRes.code == 0) {
|
||||
tableData.value = [];
|
||||
tableData.value.push(...resourcesRes.data);
|
||||
} else {
|
||||
throw new Error(resourcesRes.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(`加载失败 ${error}`)
|
||||
}
|
||||
}
|
||||
const tableData = ref([])
|
||||
const dialogEditFormVisible = ref(false);
|
||||
const editForm = reactive({
|
||||
id: '',
|
||||
type: '',
|
||||
recommand: 1,
|
||||
title: '',
|
||||
describe: '',
|
||||
icon_src: '',
|
||||
addition: '',
|
||||
src: '',
|
||||
})
|
||||
const editHandle = (data) => {
|
||||
editForm.id = data.id;
|
||||
editForm.type = data.type;
|
||||
editForm.recommand = +data.recommand;
|
||||
editForm.title = data.title;
|
||||
editForm.describe = data.describe;
|
||||
editForm.icon_src = data.icon_src;
|
||||
editForm.src = data.src;
|
||||
editForm.addition = JSON.stringify(data.addition);
|
||||
dialogEditFormVisible.value = true;
|
||||
}
|
||||
const addHandle = () => {
|
||||
editForm.id = '';
|
||||
editForm.type = '';
|
||||
editForm.recommand = 1;
|
||||
editForm.title = '';
|
||||
editForm.describe = '';
|
||||
editForm.icon_src = '';
|
||||
editForm.src = '';
|
||||
editForm.addition = '';
|
||||
dialogEditFormVisible.value = true;
|
||||
}
|
||||
const saveHandle = async () => {
|
||||
// 表单验证
|
||||
if (!editForm.addition || !editForm.describe || !editForm.icon_src || !editForm.recommand || !editForm.src || !editForm.title || !editForm.type) {
|
||||
return ElMessage.warning('请先完成表单')
|
||||
}
|
||||
try {
|
||||
let res = await request.post('/console/saveResource', {
|
||||
id: editForm.id,
|
||||
type: editForm.type,
|
||||
recommand: editForm.recommand,
|
||||
title: editForm.title,
|
||||
describe: editForm.describe,
|
||||
icon_src: editForm.icon_src,
|
||||
addition: editForm.addition,
|
||||
src: editForm.src,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
dialogEditFormVisible.value = false;
|
||||
loadTableData();
|
||||
return ElMessage.success('保存成功');
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
return ElMessage.error(`保存失败 ${error}`);
|
||||
}
|
||||
}
|
||||
const delHandle = async (data) => {
|
||||
let { id } = data;
|
||||
try {
|
||||
let res = await request.delete('/console/resource?id=' + id);
|
||||
if (res.code == 0) {
|
||||
ElMessage.success('删除成功');
|
||||
loadTableData();
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
return ElMessage.error(`删除失败 ${error}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div style="padding: 15px 20px;">
|
||||
<el-text>总数量：{{ tableData.length }}</el-text>
|
||||
<el-button type="primary" style="width: 120px;margin-left: 20px;" @click="addHandle">添加</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="id" label="id" width="50" />
|
||||
<el-table-column prop="type" label="类型" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.row.type == 'resource' ? '资源' : scope.row.type == 'download' ? '下载' : '未知' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="recommand" label="推荐" width="50" />
|
||||
<el-table-column prop="title" label="标题" width="130" />
|
||||
<el-table-column prop="describe" label="描述" width="200" />
|
||||
<el-table-column prop="icon_src" label="图标" width="110">
|
||||
<template #default="scope">
|
||||
<div class="el-table-col-image-preview">
|
||||
<el-image :src="scope.row.icon_src" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="addition" label="附加样式" width="300">
|
||||
<template #default="scope">
|
||||
{{ scope.row.addition }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="src" label="资源" width="180" />
|
||||
<el-table-column fixed="right" label="操作" min-width="120">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogEditFormVisible" title="编辑" width="800">
|
||||
<el-form :model="editForm" label-width="auto" style="margin: 0 30px;">
|
||||
<el-form-item label="id">
|
||||
<el-input v-model="editForm.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="editForm.type" placeholder="请选择类型">
|
||||
<el-option label="资源" value="resource" />
|
||||
<el-option label="下载" value="download" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐程度">
|
||||
<el-input-number v-model="editForm.recommand" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题">
|
||||
<el-input v-model="editForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="editForm.describe" type="textarea" autosize />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标链接">
|
||||
<el-input v-model="editForm.icon_src" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资源链接">
|
||||
<el-input v-model="editForm.src" />
|
||||
</el-form-item>
|
||||
<el-form-item label="附加样式">
|
||||
<el-input v-model="editForm.addition" type="textarea" autosize />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogEditFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveHandle">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-table-col-image-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { Menu as IconMenu, Document } from '@element-plus/icons-vue'
|
||||
import Resources from '../../components/Console/Resources.vue'
|
||||
import Blogs from '../../components/Console/Blogs.vue'
|
||||
import { shallowRef } from 'vue';
|
||||
const tabComponent = shallowRef(Resources)
|
||||
</script>
|
||||
<template>
|
||||
Dashboard
|
||||
</template>
|
||||
<div class="dashboard-container">
|
||||
<el-menu default-active="1" class="menu">
|
||||
<el-menu-item index="1" @click="tabComponent = Resources">
|
||||
<el-icon><icon-menu /></el-icon>
|
||||
<span>资源及下载</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" @click="tabComponent = Blogs">
|
||||
<el-icon>
|
||||
<document />
|
||||
</el-icon>
|
||||
<span>博客</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div style="flex: 1;min-height: calc(100vh - 90px);">
|
||||
<KeepAlive>
|
||||
<component :is="tabComponent" />
|
||||
</KeepAlive>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.dashboard-container{
|
||||
display: flex;
|
||||
}
|
||||
.dashboard-container .menu{
|
||||
min-width: 200px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user