blog機能完成

src/view/blog/index.vue

@@ -1,21 +1,47 @@
 <template>
-  <el-button @click="openBlogEditer">进入博客小作坊</el-button>
-  <el-button @click="test">获取博客内容</el-button>
-  <el-button @click="test1">新增博客</el-button>
-  <el-button @click="test2">更新博客</el-button>
-  <el-button @click="test3">削除博客</el-button>
+  <el-form :model="form" label-width="120px">
+    <el-form-item label="关键字搜索">
+      <el-col :span="7">
+        <el-input v-model="form.key_word" />
+      </el-col>
+      <el-col :span="1"></el-col>
+      <el-col :span="10">
+        <span>分类搜索</span>
+        <el-select v-model="form.btId" placeholder="选择分类">
+          <el-option v-for="item in btNameList" :key="item.btId" :label="item.btName" :value="item.btId" />
+        </el-select>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="创作时间">
+      <el-col :span="7">
+        <el-date-picker v-model="form.start_day" type="date" placeholder="开始时间" style="width: 100%" />
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="7">
+        <el-time-picker v-model="form.end_day" placeholder="结束时间" style="width: 100%" />
+      </el-col>
+      <el-col :span="6" style="text-align: center;">
+        <el-button type="primary" @click="onSubmit">搜索</el-button>
+      </el-col>
+    </el-form-item>
+  </el-form>
+  <el-button @click="openBlogEditer">创作</el-button>
 
   <div class="blog_list" v-for="item in data_list">
-    <h3 style="cursor: pointer;" @click="openBlog">{{ item.title }}</h3>
-    <span style="font-size: 12px;">{{ item.blog_prex }}</span>
+    <h3 style="cursor: pointer; width: min-content;white-space:nowrap" @click="openBlog(item.bid)">{{ item.title }}</h3>
+    <span style="font-size: 12px;">{{ item.bid }}</span>
+    <!-- <span style="font-size: 12px;">{{ item.blog_prex }}</span> -->
   </div>
 
 
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
-import { get_blogs, getContent, putBlog, updateContent, deleteContent } from '../../api/blog'
+import Cookies from 'js-cookie';
+import { reactive } from 'vue';
+import { getBlogs, getBtName } from '../../api/blogView'
 import router from '../../router/index'
 type Blog = {
   bid: string,
@@ -25,23 +51,58 @@ type Blog = {
   blog_prex: string,
   content: string
 }
-const data_list = reactive<Blog[]>([])
+type Blog_Type = {
+  btId: string,
+  btName: string
+}
 
-const query = () => {
-  get_blogs(1).then(response => {
+//　変数定義
+const form = reactive({
+  key_word: '',
+  btId: '',
+  start_day: '',
+  end_day: ''
+})
+const data_list = reactive<Blog[]>([])
+const btNameList = reactive<Blog_Type[]>([])
+
+// 関数定義
+const init = () => {
+  getBlogs({}).then(response => {
     response.data.forEach((item: Blog) => {
       data_list.push(item)
-    });
+    })
+  })
+  getBtName().then(response => {
+    btNameList.push({ btId: "", btName: "选择分类" })
+    response.data.forEach((item: any) => {
+      const bts = {
+        btId: item.btId,
+        btName: item.btName
+      }
+      btNameList.push(bts)
+    })
   })
 }
-query()
 
-let text = ref<string>('')
-text.value = "开始吧肿瘤"
 
-const openBlog = () => {
+const onSubmit = () => {
+  getBlogs(form).then(response => {
+    data_list.splice(0, data_list.length);
+    response.data.forEach((item: Blog) => {
+      data_list.push(item)
+    })
+  })
+}
+
+const openBlog = (bid: string) => {
+
+  Cookies.set('bid', bid)
   const { href } = router.resolve({
-    path: '/blog=1'
+    path: '/view',
+    query: {
+      bid: bid
+    }
   });
   window.open(href, '_blank');
 }
@@ -52,36 +113,11 @@ const openBlogEditer = () => {
   });
   window.open(href, '_blank');
 }
-const test = () => {
-  getContent('123456').then(response => {
-    console.log(response)
-  })
-}
-const test1 = () => {
-  const params = {
-    blog_type_id: "2808000",
-    title: "dddddddd"
-  }
-  putBlog(params).then(response => {
-    console.log(response)
-  })
-}
-const test2 = () => {
-  const params = {
-    bid: "22222",
-    title: "22222222222",
-    content: "dddddddddddddddddddddddddddd"
-  }
-  updateContent(params).then(response => {
-    console.log(response)
-  })
-}
 
-const test3 = () => {
-  deleteContent('22222').then(response => {
-    console.log(response)
-  })
-}
+
+// 初期化処理
+init()
+
 </script>
 
 <style>