经过4天的努力总算把两个模块开发出来了，经过一晚上的在云服务器的配置，总算可以发不了哈哈

2022-04-05 23:34:16 +08:00
parent 5c78d43302
commit 1a74970092
11 changed files with 308 additions and 72 deletions
@@ -1,10 +1,13 @@
 import request from '../utils/request'
+import Qs from 'qs'
 const search_bookmark = (params: Object) => {
  return request({
    url: '/bookmark',
    method: 'get',
-    headers: {},
-    params: params
+    params: params,
+    paramsSerializer: (params) => {
+      return Qs.stringify(params, { arrayFormat: 'repeat' })
+    },
  })
 }

@@ -2,20 +2,18 @@ import axios from 'axios'

 const service = axios.create(
  {
-    baseURL: 'http://localhost:8081',
+    // baseURL: 'http://localhost:8081',
+    baseURL: 'http://49.233.4.79:8081',
    timeout: 5000
  }
 )

-
-
-
 // service.interceptors.request.use(
 //   config => {
-//     if (true) {
-//       config.headers['Authorization'] = 'Bearer' + getToken('user-token')
-//     }
-//     return config
+//     // if (true) {
+//     //   config.headers['Authorization'] = 'Bearer' + getToken('user-token')
+//     // }
+//     // return config
 //   },
 //   error => {
 //     console.log(error)
@@ -2,11 +2,10 @@
  <div class="dashboard">
    <el-form :model="dialog_form">
      <el-form-item label="分类" :label-width="formLabelWidth">
-        <el-select v-model="dialog_form.bk_type_name" placeholder>
+        <el-select v-model="dialog_form.bk_type_id" placeholder>
          <el-option
-            v-for="(item, index) in types"
-            :key="index"
-            :selected="index == 1 ? 'selected' : ''"
+            v-for="(item) in types"
+            :key="item.bk_type_id"
            :value="item.bk_type_id"
            :label="item.bk_type_name"
          />
@@ -1,38 +1,28 @@
 <template>
-  <div class="dashboard">
+  <div class="bookmark">
    <el-form>
      <el-row>
        <el-col :span="6">
          <el-form-item>
-            <!-- <el-autocomplete
-              v-model="search_data.drug"
-              poper-class="my-autocomplete"
-              :fetch-suggestions="query"
-              placeholder="xxx"
-              label=":"
-              :poper-append-to-body="false"
-            >
-              <template slot-scope="{item}">
-                <span class="value">{{ item.value }}</span>
-              </template>
-            </el-autocomplete>-->
+            <el-input v-model="search_form.comment" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
-        <el-col>
-          <el-button type="primary" @click="doSearch('')">检索</el-button>
-          <el-button type="primary" @click="handleInsert">添加</el-button>
+        <el-col :span="6">
+          <el-button type="primary" @click="doSearch">检索</el-button>
        </el-col>
      </el-row>
      <div class="tag_list">
        <el-tag
          class="ml-2 click-icon"
-          type="success"
+          :type="item.clicked ? 'danger' : 'info'"
          v-for="(item) in bookmark_types"
-          @click="doSearch(item.id)"
+          @click="handleTags(item)"
        >{{ item.bk_type_name }}</el-tag>
      </div>
    </el-form>
-    <div></div>
+    <div class="create_dialog">
+      <el-button type="primary" @click="handleInsert">新建</el-button>
+    </div>

    <el-table
      ref="multipleTableRef"
@@ -44,13 +34,17 @@
      <el-table-column type="index" label="index" width="180" />
      <el-table-column prop="bk_type_name" label="分类" width="180" />
      <el-table-column prop="comment" label="名称" width="180" />
-      <el-table-column class="click-icon" prop="url" label="url" />
-      <el-table-column class="click-icon" prop label="操作">
+      <el-table-column class="click-icon" prop="url" label="url">
+        <template #default="scope">
+          <span style="cursor: pointer" @click="openUrl(scope.row.url)">{{ scope.row.url }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop label="操作">
        <template #default="scope">
          <el-icon :size="20" @click="copyNumber(scope.row)" class="click-icon">
            <CopyDocument />
          </el-icon>
-          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button class="click-icon" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
@@ -87,6 +81,7 @@ import { CopyDocument } from "@element-plus/icons-vue";
 import { ElNotification } from 'element-plus'
 import copy from 'copy-to-clipboard';
 import { h } from 'vue'
+const formLabelWidth = '140px'


 const bookmark_types = reactive<any[]>([])
@@ -94,8 +89,9 @@ bookmark_type().then(response => {
  response.data.forEach((element: String) => {
    const item = element.split("|")
    const row = {
-      bk_type_id: item[0],
-      bk_type_name: item[1]
+      bk_type_id: Number(item[0]),
+      bk_type_name: item[1],
+      clicked: false
    }
    bookmark_types.push(row)
  })
@@ -109,11 +105,17 @@ type Bookmark = {
  comment: String,
  url: String
 }
+// 定义 表单格式
+type Searchform = {
+  bk_type_ids: number[],
+  comment: String
+}

 // 操作code
 let operate = ref<String>('')
-const search_data = reactive({
-  drug: '1'
+const search_form = reactive<Searchform>({
+  bk_type_ids: [],
+  comment: ''
 })
 // 响应式table数据
 const tableData = reactive<Bookmark[]>([])
@@ -168,20 +170,37 @@ const handleEdit = (index: number, bookmark: Bookmark) => {
  dialogFormVisible.value = true
 }

+// 
+const handleTags = (tag: any) => {
+  if (tag.clicked) {
+    tag.clicked = false
+    search_form.bk_type_ids.forEach(function (item, index, arr) {
+      if (item == tag.bk_type_id) {
+        arr.splice(index, 1);
+      }
+    });
+  } else {
+    tag.clicked = true
+    search_form.bk_type_ids.push(tag.bk_type_id)
+  }
+
+}
 const handleSelectionChange = (val: Bookmark[]) => {
  multipleSelection.value = val
 }

+const openUrl = (url: string) => {
+  window.open("https://www.runoob.com");
+}

-const doSearch = (type_id: String) => {
-  console.log(type_id)
+const doSearch = () => {
  const param = {
-    type_id: type_id
+    comment: search_form.comment,
+    type_id: search_form.bk_type_ids
  }
  tableData.splice(0, tableData.length)
  search_bookmark(param).then(response => {
    response.data.forEach((item: Bookmark, index: number) => {
-      console.log(item)
      const row = {
        bk_id: item.bk_id,
        bk_type_id: item.bk_type_id,
@@ -219,9 +238,6 @@ const copyNumber = (record: Bookmark) => {
 </script>

 <style scoped>
-/* .dashboard {
-  background-color: beige;
-} */
 .tag_list {
  display: flex;
  border-top: 1px solid rgba(151, 151, 151, 0.3);
@@ -232,4 +248,11 @@ const copyNumber = (record: Bookmark) => {
  margin: 10px;
  cursor: pointer;
 }
+.create_dialog {
+  margin: 10px;
+}
+.bookmark {
+  border-top: 1px solid rgba(151, 151, 151, 0.3);
+  padding-top: 20px;
+}
 </style>
@@ -22,11 +22,9 @@
 import { ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import frame from './frame.vue'
-console.log('tools')
 const activeName = ref('first')

 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
 }
 </script>