前端完成Blogs管理界面

tonecn/src/components/Console/Blogs.vue

@@ -1,7 +1,171 @@
 <script setup>
-
+import { onMounted, reactive, ref } from 'vue';
+import { request } from '../../lib/request'
+import { ElMessage } from 'element-plus';
+import { timestampToString } from '@/lib/timestampToString';
+onMounted(async () => {
+    await loadTableData();
+})
+const loadTableData = async () => {
+    try {
+        let resourcesRes = await request.get('/console/blogs')
+        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: '',
+    uuid: '',
+    title: '',
+    description: '',
+    publish_time: '',
+    src: '',
+    access_level: '',
+    visit_count: '',
+    like_count: ''
+})
+const editHandle = (data) => {
+    editForm.id = data.id;
+    editForm.uuid = data.uuid;
+    editForm.title = data.title;
+    editForm.description = data.description;
+    editForm.publish_time = new Date(+data.publish_time);
+    editForm.src = data.src;
+    editForm.access_level = data.access_level;
+    editForm.visit_count = data.visit_count;
+    dialogEditFormVisible.value = true;
+}
+const addHandle = () => {
+    editForm.id = '';
+    editForm.uuid = '';
+    editForm.title = '';
+    editForm.description = '';
+    editForm.publish_time = '';
+    editForm.src = '';
+    editForm.access_level = 10;
+    editForm.visit_count = 0;
+    editForm.like_count = 0;
+    dialogEditFormVisible.value = true;
+}
+const saveHandle = async () => {
+    // 表单验证
+    if (!editForm.title || !editForm.description || !editForm.publish_time || !editForm.src || !editForm.access_level) {
+        return ElMessage.warning('请先完成表单')
+    }
+    try {
+        let res = await request.post('/console/saveBlog', {
+            id: editForm.id,
+            uuid: editForm.uuid,
+            title: editForm.title,
+            description: editForm.description,
+            publish_time: editForm.publish_time.getTime(),
+            src: editForm.src,
+            access_level: editForm.access_level,
+        })
+        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/blog?id=' + id);
+        if (res.code == 0) {
+            ElMessage.success('删除成功');
+            loadTableData();
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        return ElMessage.error(`删除失败 ${error}`);
+    }
+}
+const formatTime = (row, column, cellValue, index) => {
+    return timestampToString(row.publish_time);
+}
 </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="uuid" label="uuid" width="120" show-overflow-tooltip />
+        <el-table-column prop="title" label="标题" width="240" />
+        <el-table-column prop="description" label="描述" width="200" show-overflow-tooltip />
+        <el-table-column prop="publish_time" label="发布时间" width="160" :formatter="formatTime" />
+        <el-table-column prop="access_level" label="可访问级别" width="100" />
+        <el-table-column prop="visit_count" label="访问量" width="80" />
+        <el-table-column prop="like_count" label="点赞量" width="80" />
+        <el-table-column fixed="right" label="操作" 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="uuid">
+                <el-input v-model="editForm.uuid" disabled />
+            </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.description" type="textarea" autosize />
+            </el-form-item>
+            <el-form-item label="发布时间">
+                <el-date-picker v-model="editForm.publish_time" type="datetime" placeholder="选择发布时间" />
+            </el-form-item>
+            <el-form-item label="文章链接">
+                <el-input v-model="editForm.src" type="textarea" autosize />
+            </el-form-item>
+            <el-form-item label="可访问级别">
+                <el-input-number v-model="editForm.access_level" :min="0" />
+                <el-text style="margin-left: 20px;" size="small">默认可访问大于6的项</el-text>
+            </el-form-item>
+            <el-form-item label="访问量">
+                <el-input-number v-model="editForm.visit_count" :min="0" disabled/>
+            </el-form-item>
+            <el-form-item label="点赞量">
+                <el-input-number v-model="editForm.like_count" :min="0" disabled/>
+            </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>