feat : 文章管理crud功能完成

src/views/article-management/detail.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-loading="loading" class="article-detail">
+    <baseTitle title="文章详情"></baseTitle>
+    <el-form :model="formData" >
+      <el-row gutter="20" style="margin-left: 5px">
+        <el-col :span="6">
+          <el-form-item label="文章标题">
+            <span>{{ formData.articleTitle }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="文章类型">
+            <Tag dictType="article_type" :value="formData.articleType"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="创建时间">
+            <span>{{ formData.createTime }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="备注">
+            <span>{{ formData.remarks }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="文章内容">
+            <div v-html="formData.articleContent"></div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {ElNotification} from "element-plus";
+import {getArticleDetail} from "@/api/article";
+const loading=ref(false)
+const formData=ref({})
+const route = useRoute()
+const getDetailInfo = async () => {
+  loading.value = true
+  getArticleDetail(route.query.id).then(res => {
+    if (res.code === 1000) {
+      formData.value = res.data
+      loading.value = false
+    }else{
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
+onMounted(async () => {
+  if (route.query.id) {
+    await getDetailInfo()
+  }
+})
+</script>
+
+<style scoped>
+.article-detail{
+  padding: 0 30px;
+  width: 100%;
+  height: 100%;
+}
+</style>