feat: 增加查询功能，及本地历史

NMTuan · Jul 14, 2023 · db9362c · db9362c
1 parent e0360b5
commit db9362c
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 51 deletions.
diff --git a/components/manager/edit.vue b/components/manager/edit.vue
@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-07-13 17:22:21
- * @LastEditTime: 2023-07-13 21:02:53
+ * @LastEditTime: 2023-07-14 14:42:22
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \laf_curd\components\manager\edit.vue
@@ -59,14 +59,6 @@ const handlerSubmit = () => {
 }
 </script>
 <style lang="scss" scoped>
-.descriptions {
-    :deep() {
-        .el-descriptions__label {
-            @apply font-bold;
-        }
-    }
-}
-
 :deep() {
     .el-textarea__inner {
         @apply h-full;

diff --git a/components/manager/history.vue b/components/manager/history.vue
@@ -0,0 +1,42 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2023-07-14 14:40:50
+ * @LastEditTime: 2023-07-14 15:11:04
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: \laf_curd\components\manager\history.vue
+-->
+<template>
+    <el-drawer title="History" :model-value="visible" direction="rtl" :before-close="handlerClose">
+        <el-timeline>
+            <el-timeline-item v-for="item in history" :key="index" placement="top"
+                :timestamp="new Date(item.date).toLocaleString()">
+                <div @click="handlerClick(item.statement)"
+                    class="p-4 border border-solid border-gray-200 rounded cursor-pointer hover:(border-teal-500 bg-teal-50)">
+                    {{ item.statement }}
+                </div>
+            </el-timeline-item>
+        </el-timeline>
+    </el-drawer>
+</template>
+<script setup>
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    }
+})
+const emits = defineEmits(['search'])
+const history = useCookie('laf_curd_history', {
+    default: () => []
+})
+
+const handlerClose = () => {
+    emits('update:visible', false)
+}
+const handlerClick = (statement) => {
+    emits('search', statement)
+    handlerClose()
+}
+</script>
diff --git a/components/manager/tab.vue b/components/manager/tab.vue
@@ -2,14 +2,14 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-07-12 20:27:09
- * @LastEditTime: 2023-07-13 07:40:55
+ * @LastEditTime: 2023-07-14 10:43:58
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \laf_curd\components\manager\tab.vue
 -->
 <template>
     <div class="tabs w-full overflow-hidden">
-        <el-tabs v-model="activeName" type="border-card" closable addable @tab-click="handleClick">
+        <el-tabs v-model="activeName" type="border-card" closable @tab-click="handleClick">
             <el-tab-pane :label="item" :name="item" v-for="item in tabStore.list">
                 <template #label>
                     <div>

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.4.11",
+    "ejson-shell-parser": "^1.2.4",
     "laf-client-sdk": "^1.0.0-beta.8",
     "pinia": "^2.1.4",
     "simplebar-vue": "^2.3.3"

diff --git a/pages/manager/[...key].vue b/pages/manager/[...key].vue
@@ -1,75 +1,103 @@
 <template>
-    <div class="overflow-hidden flex-1 flex flex-col">
-        <div class="p-4">
+    <div class="overflow-hidden flex-1 flex flex-col" v-loading="loading">
+        <div class="p-4 flex items-center justify-between">
             <el-button type="primary" @click="createVisible = true">Create</el-button>
-            <el-divider direction="vertical" />
-            <el-button :disabled="currentRowIndex === -1" @click="detailVisible = true">Detail</el-button>
-            <el-button :disabled="currentRowIndex === -1" @click="editVisible = true">Edit</el-button>
-            <el-button :disabled="currentRowIndex === -1" @click="handlerDelete">Delete</el-button>
+            <el-button-group class="mx-3">
+                <el-button :disabled="currentRowIndex === -1" @click="detailVisible = true">Detail</el-button>
+                <el-button :disabled="currentRowIndex === -1" @click="editVisible = true">Edit</el-button>
+                <el-button :disabled="currentRowIndex === -1" @click="handlerDelete">Delete</el-button>
+            </el-button-group>
+            <!-- 搜索 -->
+            <el-input class="flex-1" v-model.trim="q" clearable @keyup.enter="handlerSearch"
+                placeholder="document ID | Mongo where statement | Laf where statement">
+                <template #prepend>
+                    <el-button @click="handlerSearch">Search</el-button>
+                </template>
+                <template #append>
+                    <el-button @click="historyVisible = true">
+                        <div class="i-ri-history-line"></div>
+                    </el-button>
+                </template>
+            </el-input>
         </div>
-        <div class="flex-1 overflow-hidden flex flex-col" v-loading="loading">
-            <div class="flex-1 overflow-hidden mx-4 border">
-                <el-auto-resizer>
-                    <template #default="{ width, height }">
-                        <el-table-v2 class="table" :row-class="handlerRowClass" fixed :columns="columns" :data="list"
-                            :width="width" :height="height">
-                            <template #cell="{ column, columns, columnIndex, depth, style, rowData, rowIndex }">
-                                <div class="flex items-center flex-1 h-full text-sm overflow-hidden px-2"
-                                    @click="handlerCellClick({ rowIndex })">
-                                    <div class="truncate">{{ rowData[column.title] }}</div>
-                                </div>
-                            </template>
-                        </el-table-v2>
-                    </template>
-                </el-auto-resizer>
-            </div>
-            <div class="px-4 pt-3 pb-4">
-                <el-pagination v-model:current-page="page" background layout="prev, pager, next, jumper, ->, total, sizes"
-                    :total="total" v-model:page-size="pageSize" />
-            </div>
+        <!-- 表格 -->
+        <div class="flex-1 overflow-hidden mx-4 ">
+            <el-auto-resizer>
+                <template #default="{ width, height }">
+                    <el-table-v2 class="table" :row-class="handlerRowClass" fixed :columns="columns" :data="list"
+                        :width="width" :height="height">
+                        <template #cell="{ column, columns, columnIndex, depth, style, rowData, rowIndex }">
+                            <div class="flex items-center flex-1 h-full text-sm overflow-hidden px-2"
+                                @click="handlerCellClick({ rowIndex })">
+                                <div class="truncate">{{ rowData[column.title] }}</div>
+                            </div>
+                        </template>
+                    </el-table-v2>
+                </template>
+            </el-auto-resizer>
         </div>
+        <!-- 分页 -->
+        <div class="px-4 pt-3 pb-4">
+            <el-pagination v-model:current-page="page" background layout="prev, pager, next, jumper, ->, total, sizes"
+                :total="total" v-model:page-size="pageSize" />
+        </div>
+
         <ManagerDetail :data="list[currentRowIndex]" v-model:visible="detailVisible"></ManagerDetail>
         <ManagerEdit :id="list[currentRowIndex]?._id" v-model:visible="editVisible" @fetch="handlerFetch"></ManagerEdit>
         <ManagerCreate v-model:visible="createVisible" :fields="columns" @fetch="handlerFetch"></ManagerCreate>
+        <ManagerHistory v-model:visible="historyVisible" @search="handlerHistorySearch"></ManagerHistory>
     </div>
 </template>
 <script setup>
-const { fetch, count, remove } = useCloud()
+import parse from 'ejson-shell-parser';
+const { _, fetch, count, remove } = useCloud()
 const columns = ref([]) // 表格列配置项
 const list = ref([]) // 表格数据
 const total = ref(0) // 总条数
 const loading = ref(false)
 const page = ref(1) // 当前页码
-const pageSize = ref(20) // 每页数量
+const pageSize = useCookie('laf_curd_pageSize', {
+    default: () => (20)
+}) // 每页数量
 const currentRowIndex = ref(-1) // 当前行索引
 const detailVisible = ref(false)
 const editVisible = ref(false)
 const createVisible = ref(false)
+const historyVisible = ref(false)
 
+const q = ref('')   // 搜索框的内容
+const where = ref({})   // 由q经过处理后的查询条件
+const history = useCookie('laf_curd_history', {
+    default: () => []
+})
 // 查询条件
 const query = computed(() => {
     return {
         page: page.value,
-        pageSize: pageSize.value
+        pageSize: pageSize.value,
+        query: where.value
     }
 })
 
 // 获取数据
 const handlerFetch = () => {
     currentRowIndex.value = -1  // 每次获取数据，清除掉选中的行
     fetch(query.value, loading).then(res => {
-        columns.value = Object.keys(res.data[0]).reduce((total, key) => {
-            total.push({
-                key: key,
-                dataKey: key,
-                title: key,
-                // minWidth: '200',
-                width: 200
-            })
-            return total
-        }, [])
+        if (res.data.length === 0) {
+            columns.value = [{ key: '_id', dataKey: '_id', title: '_id', width: 200 }]
+        } else {
+            columns.value = Object.keys(res.data[0]).reduce((total, key) => {
+                total.push({
+                    key: key,
+                    dataKey: key,
+                    title: key,
+                    // minWidth: '200',
+                    width: 200
+                })
+                return total
+            }, [])
+        }
         list.value = res.data
-        console.log('columns', columns)
     })
 }
 
@@ -104,6 +132,46 @@ const handlerDelete = () => {
         })
 }
 
+// 按下搜索
+const handlerSearch = () => {
+    try {
+        if (!q.value) {
+            where.value = {}
+        } else if (/^[^{}]*$/.test(q.value)) {
+            // 没有花括号，当id处理
+            where.value = { _id: q.value };
+        } else if (/^{.*?_\..*?}$/.test(q.value)) {
+            // 包含 _. 关键字当 laf 语句
+            where.value = eval(`(${q.value})`)
+        } else {
+            // 否则当 mongodb 语句
+            where.value = parse(q.value)
+        }
+    }
+    catch (err) {
+        ElMessage({
+            message: 'Please enter the correct query.',
+            type: 'error'
+        })
+        return
+    }
+    if (q.value) {
+        history.value = history.value.filter(item => item.statement !== q.value) || []
+        history.value.unshift({
+            statement: q.value,
+            date: Date.now()
+        })
+    }
+    page.value = 1
+    handlerFetch()
+    handlerCount()
+}
+// 点击历史进行搜索
+const handlerHistorySearch = (statement) => {
+    q.value = statement
+    handlerSearch()
+}
+
 // 每当页面或条数变化，重新获取数据
 watch([page, pageSize], () => {
     handlerFetch()

diff --git a/yarn.lock b/yarn.lock
@@ -1660,6 +1660,11 @@ acorn@8.9.0, acorn@^8.6.0, acorn@^8.8.2, acorn@^8.9.0:
   resolved "https://registry.npmmirror.com/acorn/-/acorn-8.9.0.tgz#78a16e3b2bcc198c10822786fa6679e245db5b59"
   integrity sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==
 
+acorn@^8.1.0:
+  version "8.10.0"
+  resolved "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -2758,6 +2763,13 @@ ee-first@1.1.1:
   resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
+ejson-shell-parser@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/ejson-shell-parser/-/ejson-shell-parser-1.2.4.tgz#01f3ba6e1ac07b229fc9d8c3b867b7d864a72ae0"
+  integrity sha512-bweqlPb9ChFu25I4IOc4kevGfHhXS+r/PyFTqdLYNerB4J52UIxrvYX+4lyer0PQuWvn3WoFO/KLMbMiYo+8PA==
+  dependencies:
+    acorn "^8.1.0"
+
 electron-to-chromium@^1.4.431:
   version "1.4.446"
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.446.tgz#c23fbc7884bfe43088d5eb908a858dbb35ab190b"