后台管理添加体温上报

2023-04-14 00:53:02 +08:00
parent bad6ecb111
commit fb10c7e666
22 changed files with 472 additions and 58 deletions
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
--- a/frontend/src/api/report.js
+++ b/frontend/src/api/report.js
@@ -0,0 +1,41 @@
+import send_request from '../utils/send_request';
+
+/**
+ * 获取体温列表
+ * @returns
+ */
+export function getReportList(params) {
+    // 深拷贝一份，避免 删除 timestamp 时页面上的输入框也清空了
+    // 但是 Date 类型的对象无法拷贝，所以还是获取深拷贝之间的
+    let paramsCopy = JSON.parse(JSON.stringify(params))
+    delete paramsCopy.timestamp
+    if (Array.isArray(params.timestamp) && params.timestamp.length == 2) {
+        paramsCopy.startTime = params.timestamp[0]?.getTime()
+        paramsCopy.endTime = params.timestamp[1]?.getTime()
+    }
+    return send_request({
+        url: '/access/report/manage/getReportList',
+        method: 'GET',
+        params: paramsCopy,
+    });
+};
+
+/**
+ * 导出体温列表
+ * @returns
+ */
+export function exportReportList(params) {
+    // 深拷贝一份，避免 删除 timestamp 时页面上的输入框也清空了
+    // 但是 Date 类型的对象无法拷贝，所以还是获取深拷贝之间的
+    let paramsCopy = JSON.parse(JSON.stringify(params))
+    delete paramsCopy.timestamp
+    if (Array.isArray(params.timestamp) && params.timestamp.length == 2) {
+        paramsCopy.startTime = params.timestamp[0]?.getTime()
+        paramsCopy.endTime = params.timestamp[1]?.getTime()
+    }
+    return send_request({
+        url: '/access/report/manage/exportReportList',
+        method: 'GET',
+        params: paramsCopy,
+    });
+};
--- a/frontend/src/components/manage-list.vue
+++ b/frontend/src/components/manage-list.vue
@@ -18,12 +18,17 @@
                        <el-option v-for="optKey in Object.keys(field.options)" :key="optKey" :label="field.options[optKey]"
                            :value="optKey"></el-option>
                    </el-select>
+                    <el-date-picker v-else-if="field.searchType == 'time-interval'" v-model="query[field.field]"
+                        type="datetimerange" :shortcuts="dateTimePickerRangeShotcut" range-separator="至"
+                        :start-placeholder="field.placeholder + ' 起始时间'" :end-placeholder="field.placeholder + '结束时间'"
+                        :prefix-icon="Filter" style="width: 350px; margin-right: 10px;" />
                    <template v-else>{{ field }}</template>
                </template>
                <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
-                <el-button type="primary" :icon="Plus" @click="handleNew" v-permiss="props.editPermiss">新增记录</el-button>
-                <el-button type="primary" :icon="Download" @click="exportFormVisible = true"
-                    v-permiss="props.editPermiss">导出到文件</el-button>
+                <el-button type="primary" :icon="Plus" @click="handleNew" v-permiss="props.editPermiss"
+                    v-if="props.addFunc">新增记录</el-button>
+                <el-button type="primary" :icon="Download" @click="exportFormVisible = true" v-permiss="props.editPermiss"
+                    v-if="props.exportFunc">导出到文件</el-button>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
@@ -31,29 +36,34 @@
                <el-table-column v-for="(field, index) in tableFields" :prop="field.prop" :label="field.label" :key="index"
                    align="center">
                    <template #default="scope" v-if="field.type == 'image'">
-                        <el-image style="width: 100%; height: 100%;" :src="scope.row.picUrl" fit="cover" />
+                        <el-image style="width: 100%; height: 100%;" :src="scope.row[field.prop]" fit="cover" />
+                    </template>
+                    <template #default="scope" v-else-if="field.type == 'time'">
+                        {{
+                        new Date(scope.row[field.prop] + 8 * 3600 * 1000).toISOString().replace('T', ' ').substring(0,19)
+                        }}
                    </template>
                    <template #default="scope" v-else-if="field.type == 'longtext'">
                        <el-tooltip placement="top">
                            <template #content>
-                                <p v-for="line in scope.row.detail.split(/[\r\n]/g)" style="max-width: 300px;">
+                                <p v-for="line in scope.row[field.prop].split(/[\r\n]/g)" style="max-width: 300px;">
                                    {{ line }}
                                </p>
                            </template>
                            <div class="oneLine">
-                                {{scope.row.detail}}
+                                {{ scope.row[field.prop] }}
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
-                <el-table-column label="操作" width="220" align="center">
+                <el-table-column label="操作" width="220" align="center" v-if="props.editFunc || props.deleteFunc">
                    <template #default="scope">
                        <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
-                            v-permiss="props.editPermiss">
+                            v-permiss="props.editPermiss" v-if="props.editFunc">
                            编辑
                        </el-button>
                        <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
-                            v-permiss="props.editPermiss">
+                            v-permiss="props.editPermiss" v-if="props.deleteFunc">
                            删除
                        </el-button>
                    </template>
@@ -144,17 +154,17 @@ const props = defineProps({
    // 新增 接口函数
    'addFunc': {
        type: Function,
-        required: true,
+        required: false,
    },
    // 修改 接口函数
    'editFunc': {
        type: Function,
-        required: true,
+        required: false,
    },
-    // 修改 接口函数
+    // 删除 接口函数
    'deleteFunc': {
        type: Function,
-        required: true,
+        required: false,
    },
    // 导出 接口函数
    'exportFunc': {
@@ -330,6 +340,7 @@ const getData = async () => {

        // 测试数据
        mockData = data.columns
+            .filter((field: any) => field.mockRegex)
            .map((field: any) => {
                let spaceIndex = field.mockRegex.indexOf(' ')
                if (spaceIndex == -1) return
@@ -577,6 +588,73 @@ const doMockData = (isEdit: boolean) => {
 onMounted(() => {
    getData();
 });
+
+
+
+// 附加内容
+const dateTimePickerRangeShotcut = [
+    {
+        text: '今天',
+        value: () => {
+            const start = new Date()
+            start.setHours(0)
+            start.setMinutes(0)
+            start.setSeconds(0)
+            start.setMilliseconds(0)
+            const end = new Date(start.getTime() + 24 * 3600 * 1000)
+            return [start, end]
+        },
+    },
+    {
+        text: '昨天',
+        value: () => {
+            const end = new Date()
+            end.setHours(0)
+            end.setMinutes(0)
+            end.setSeconds(0)
+            end.setMilliseconds(0)
+            const start = new Date(end.getTime() - 24 * 3600 * 1000)
+            return [start, end]
+        },
+    },
+    {
+        text: '过去24小时',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
+            return [start, end]
+        },
+    },
+    {
+        text: '过去7天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+        },
+    },
+    {
+        text: '过去30天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+        },
+    },
+    {
+        text: '过去90天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            return [start, end]
+        },
+    },
+]
+
 </script>

 <style scoped>
--- a/frontend/src/components/sidebar.vue
+++ b/frontend/src/components/sidebar.vue
@@ -1,7 +1,8 @@
 <template>
    <div class="sidebar">
-        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse" background-color="#324157"
-            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
+        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse"
+            :default-openeds="activeItemList" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff"
+            router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
@@ -11,18 +12,9 @@
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>
-                        <template v-for="subItem in item.subs">
-                            <el-sub-menu v-if="subItem.subs" :index="subItem.index" :key="subItem.index"
-                                v-permiss="item.permiss">
-                                <template #title>{{ subItem.title }}</template>
-                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
-                                    {{ threeItem.title }}
-                                </el-menu-item>
-                            </el-sub-menu>
-                            <el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
-                                {{ subItem.title }}
-                            </el-menu-item>
-                        </template>
+                        <el-menu-item v-for="subItem in item.subs" :index="subItem.index" v-permiss="item.permiss">
+                            {{ subItem.title }}
+                        </el-menu-item>
                    </el-sub-menu>
                </template>
                <template v-else>
@@ -39,7 +31,7 @@
 </template>

 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useSidebarStore } from '../store/sidebar';
 import { useRoute } from 'vue-router';
 import settings from '../utils/settings';
@@ -53,20 +45,15 @@ const items = [
        permiss: 'dashboard',
    },
    {
-        icon: 'BellFilled',
-        index: '/warning',
-        title: '预警信息',
-        permiss: 'warning',
+        icon: 'OfficeBuilding',
+        index: '/report',
+        title: '体温上报',
+        permiss: 'report',
        subs: [
            {
-                index: '/warning-view',
-                title: '总览',
-                permiss: 'warning-view',
-            },
-            {
-                index: '/warning-setting',
-                title: '预警设置',
-                permiss: 'warning-setting',
+                index: '/report-setting',
+                title: '体温管理',
+                permiss: 'report-setting',
            },
        ],
    },
@@ -109,6 +96,9 @@ const onRoutes = computed(() => {
 });

 const sidebar = useSidebarStore();
+
+// 默认全部展开
+const activeItemList = items.map((i) => i.index)
 </script>

 <style scoped>
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -31,6 +31,15 @@ const routes: RouteRecordRaw[] = [
                },
                component: () => import('../views/shop-good-setting.vue'),
            },
+            {
+                path: '/report-setting',
+                name: 'report-setting',
+                meta: {
+                    title: '体温管理',
+                    permiss: 'report-setting',
+                },
+                component: () => import('../views/report-setting.vue'),
+            },
            {
                path: '/shop-cate-setting',
                name: 'shop-cate-setting',
--- a/frontend/src/store/permiss.ts
+++ b/frontend/src/store/permiss.ts
@@ -15,6 +15,9 @@ export const usePermissStore = defineStore('permiss', {

                "dashboard",

+                "report",
+                "report-setting",
+
                "shop",
                "shop-good-setting",
                "shop-cate-setting",
@@ -29,6 +32,9 @@ export const usePermissStore = defineStore('permiss', {

                "dashboard",

+                "report",
+                "report-setting",
+
                "shop",
                "shop-good-setting",
                "shop-cate-setting",
@@ -38,9 +44,4 @@ export const usePermissStore = defineStore('permiss', {
            ]
        };
    },
-    // actions: {
-    //     handleSet(val: string[]) {
-    //         this.key = val;
-    //     }
-    // }
 });
--- a/frontend/src/views/report-setting.vue
+++ b/frontend/src/views/report-setting.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="container">
+        <manageList :list-func="reportApi.getReportList" :export-func="reportApi.exportReportList"
+            edit-permiss="privilege-user-setting" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import manageList from '../components/manage-list.vue';
+import * as reportApi from '../api/report';
+</script>