将状态绑定到字典上

src/assets/styles/index.scss

@@ -220,3 +220,7 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+.el-tabs--top {
+  flex-direction: column;
+}

src/views/blog/posts/index.vue

@@ -53,7 +53,11 @@
     <el-table v-loading="loading" :data="postsList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="状态" align="center" prop="status"/>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :options="blog_post_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="标题" align="center" prop="title"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
@@ -78,12 +82,13 @@
 </template>
 
 <script setup name="Posts">
-import {listPosts, getPosts, delPosts, addPosts, updatePosts} from "@/api/blog/posts";
+import {listPosts, getPosts, delPosts} from "@/api/blog/posts";
 import {useRouter} from 'vue-router';
 
 const router = useRouter();
 
 const {proxy} = getCurrentInstance();
+const { blog_post_status } = proxy.useDict('blog_post_status');
 
 // 表格数据
 const postsList = ref([]);

src/views/blog/posts/setting.vue

@@ -21,6 +21,16 @@
       <el-form-item label="是否置顶：" prop="topPriority">
         <el-switch v-model="localForm.topPriority"/>
       </el-form-item>
+        <el-form-item label="状态：" prop="status">
+          <el-select v-model="localForm.status" placeholder="请选择状态">
+            <el-option
+              v-for="dict in blog_post_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
       <el-form-item label="关键字：" prop="keywords">
         <el-input v-model="localForm.keywords" type="textarea" placeholder="请输入内容"/>
       </el-form-item>
@@ -53,8 +63,11 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:form']);
 
+const {proxy} = getCurrentInstance();
+const { blog_post_status } = proxy.useDict('blog_post_status');
+
 const treeProps = ref({
-  value: 'id',
+  // value: 'id',
   label: 'name'
 })