feat: 优化代码,去掉无用的依赖

package.json

@@ -24,7 +24,6 @@
         "core-js": "^3.6.5",
         "crypto-js": "^4.0.0",
         "date-fns": "^2.14.0",
-    "enquire.js": "^2.1.6",
         "highlight.js": "^10.2.1",
         "lodash": "^4.17.21",
         "mockjs": "^1.1.0",
@@ -41,12 +40,12 @@
     },
     "devDependencies": {
         "@ant-design/colors": "^4.0.1",
+        "@babel/eslint-parser": "^7.14.7",
         "@vue/cli-plugin-babel": "^4.4.0",
         "@vue/cli-plugin-eslint": "^4.4.0",
         "@vue/cli-service": "^4.4.0",
         "@vuepress/plugin-back-to-top": "^1.5.2",
         "autoprefixer": "^9.8.6",
-    "babel-eslint": "^10.1.0",
         "babel-plugin-transform-remove-console": "^6.9.4",
         "babel-polyfill": "^6.26.0",
         "compression-webpack-plugin": "^2.0.0",
@@ -74,7 +73,7 @@
             "eslint:recommended"
         ],
         "parserOptions": {
-      "parser": "babel-eslint"
+            "parser": "@babel/eslint-parser"
         },
         "rules": {
             "no-unused-vars": "off"

src/App.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import { enquireScreen } from './utils/commonUtil';
-import { mapState, mapMutations } from 'vuex';
+import { mapState } from 'vuex';
 import { changeThemeColor } from '@/utils/themeUtil';
+import langUtils from '@/utils/langUtils';
 
 export default {
     name: 'App',
@@ -18,15 +18,10 @@ export default {
     },
     created() {
         this.setHtmlTitle();
-        this.setLanguage(this.lang);
-        enquireScreen(isMobile => this.setDevice(isMobile));
+        this.setLanguage();
     },
 
     watch: {
-        lang(val) {
-            this.setLanguage(val);
-            this.setHtmlTitle();
-        },
         $route() {
             this.setHtmlTitle();
         },
@@ -44,12 +39,11 @@ export default {
     },
     computed: {
         //setting = mapStore.name
-        ...mapState('settingModule', ['layout', 'theme', 'lang']),
+        ...mapState('settingModule', ['layout', 'theme']),
     },
     methods: {
-        ...mapMutations('settingModule', ['setDevice']),
-
-        setLanguage(lang) {
+        setLanguage() {
+            const lang = langUtils.get();
             this.$i18n.locale = lang;
             switch (lang) {
                 case 'zh_CN':

src/api/task.js

-import { postReq, putReq } from '@/utils';
+import { getReq, postReq, putReq } from '@/utils';
 
 export function addTaskApi(data) {
     return postReq('/api/v1/schedules', data);
@@ -7,3 +7,7 @@ export function addTaskApi(data) {
 export function updateTaskApi(data) {
     return putReq('/api/v1/schedules', data);
 }
+
+export function getRangerInspectionTaskDetailApi(id) {
+    return getReq(`/ranger/inspection/api/v1/jobs/tasks/${id}`);
+}

src/components/menu/SideMenu.vue

 <template>
     <a-layout-sider
         :theme="sideTheme"
-        :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
+        :class="['side-menu', 'beauty-scroll']"
         width="256px"
         :collapsible="collapsible"
         v-model="collapsed"
@@ -49,15 +49,12 @@ export default {
         sideTheme() {
             return this.theme == 'light' ? this.theme : 'dark';
         },
-        ...mapState('settingModule', ['isMobile', 'systemName']),
+        ...mapState('settingModule', ['systemName']),
     },
 };
 </script>
 
 <style lang="less" scoped>
-.shadow {
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-}
 .side-menu {
     min-height: 100vh;
     overflow-y: auto;

src/pages/frame/components/header/LayoutTopHeader.vue

 <template>
     <a-layout-header :class="[headerTheme, 'admin-header']">
         <div :class="['admin-header-wide', layout, pageWidth]">
-            <router-link
-                v-if="isMobile || layout === 'head'"
-                to="/"
-                :class="['logo', isMobile ? null : 'pc', headerTheme]"
-            >
+            <router-link v-if="layout === 'head'" to="/" :class="['logo', 'pc', headerTheme]">
                 <img width="32" src="@/assets/img/logo.png" />
-                <h1 v-if="!isMobile">{{ systemName }}</h1>
+                <h1>{{ systemName }}</h1>
             </router-link>
 
             <a-icon
@@ -16,11 +12,7 @@
                 :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                 @click="toggleCollapse"
             />
-            <div
-                v-if="layout !== 'side' && !isMobile"
-                class="admin-header-menu"
-                :style="`width: ${menuWidth};`"
-            >
+            <div v-if="layout !== 'side'" class="admin-header-menu" :style="`width: ${menuWidth};`">
                 <i-menu
                     class="head-menu"
                     :theme="headerTheme"
@@ -53,9 +45,9 @@ export default {
         return {};
     },
     computed: {
-        ...mapState('settingModule', ['theme', 'isMobile', 'layout', 'systemName', 'pageWidth']),
+        ...mapState('settingModule', ['theme', 'layout', 'systemName', 'pageWidth']),
         headerTheme() {
-            if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
+            if (this.layout == 'side' && this.theme.mode == 'dark') {
                 return 'light';
             }
             return this.theme.mode;
@@ -67,7 +59,7 @@ export default {
             return `calc(${headWidth} - ${extraWidth})`;
         },
         showToggleCollapse() {
-            if (this.layout !== 'head' && this.isMobile === false) {
+            if (this.layout !== 'head') {
                 return true;
             } else {
                 return false;

src/pages/frame/layouts/AdminLayout.vue

 <template>
     <a-layout :class="['admin-layout', 'beauty-scroll']">
-        <drawer v-if="isMobile" v-model="drawerOpen">
-            <side-menu
-                :theme="theme.mode"
-                :menuData="menuData"
-                :collapsed="false"
-                :collapsible="false"
-                @menuSelect="onMenuSelect"
-            />
-        </drawer>
-
         <side-menu
             :class="[fixedSideBar ? 'fixed-side' : '']"
             :theme="theme.mode"
-            v-else-if="layout === 'side' || layout === 'mix'"
+            v-if="layout === 'side' || layout === 'mix'"
             :menuData="sideMenuData"
             :collapsed="collapsed"
             :collapsible="true"
         />
 
         <div
-            v-if="fixedSideBar && !isMobile"
+            v-if="fixedSideBar"
             :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`"
             class="virtual-side"
         />
@@ -73,7 +63,6 @@ export default {
             minHeight: window.innerHeight - 64 - 122,
             collapsed: false,
             showSetting: false,
-            drawerOpen: false,
             menuData: [],
             firstMenu: [],
             subMenu: [],
@@ -86,18 +75,12 @@ export default {
         };
     },
     watch: {
-        isMobile(val) {
-            if (!val) {
-                this.drawerOpen = false;
-            }
-        },
         layout(layout) {
             this.updateSildeMenu(layout);
         },
     },
     computed: {
         ...mapState('settingModule', [
-            'isMobile',
             'theme',
             'layout',
             'footerLinks',
@@ -120,9 +103,7 @@ export default {
         },
         headerStyle() {
             let width =
-                this.fixedHeader && this.layout !== 'head' && !this.isMobile
-                    ? `calc(100% - ${this.sideMenuWidth})`
-                    : '100%';
+                this.fixedHeader && this.layout !== 'head' ? `calc(100% - ${this.sideMenuWidth})` : '100%';
             let position = this.fixedHeader ? 'fixed' : 'static';
             return `width: ${width}; position: ${position};`;
         },
@@ -147,11 +128,11 @@ export default {
         updateSildeMenu(layout) {
             if (layout === 'mix') {
                 const { path } = this.$route;
-                let currentMenu = this.menuList.find(i => i.menuUrl === path);
+                let currentMenu = this.menuList.find((i) => i.menuUrl === path);
                 let parentMenuId = currentMenu.parentMenuId;
 
                 while (parentMenuId !== 0) {
-                    currentMenu = this.menuList.find(i => i.menuId === parentMenuId);
+                    currentMenu = this.menuList.find((i) => i.menuId === parentMenuId);
                     parentMenuId = currentMenu.parentMenuId;
                 }
                 this.subMenu = currentMenu.children || [];
@@ -161,7 +142,7 @@ export default {
         menuSelect(obj) {
             // 拿到 菜单id
             const menuId = obj.key;
-            const currentMenu = this.menuList.find(i => i.menuId === menuId);
+            const currentMenu = this.menuList.find((i) => i.menuId === menuId);
 
             if (currentMenu.menuType === 'MENU') {
                 this.subMenu = [];
@@ -177,7 +158,7 @@ export default {
         const menuData = convertListToTree(menuList || [], false, true);
         this.menuData = menuData;
         this.menuList = menuList;
-        this.firstMenu = JSON.parse(JSON.stringify(menuData)).map(i => {
+        this.firstMenu = JSON.parse(JSON.stringify(menuData)).map((i) => {
             delete i.children;
             return i;
         });

src/pages/frame/store/settingModule.js

@@ -12,7 +12,6 @@ const customTitles = (customTitlesStr && JSON.parse(customTitlesStr)) || [];
 export default {
     namespaced: true,
     state: {
-        isMobile: false,
         animates: globalConfig.animates.preset,
         palettes: globalConfig.palettes,
         pageMinHeight: 0,
@@ -36,7 +35,7 @@ export default {
             if (menuData.length > 0 && !menuData[0].fullPath) {
                 formatFullPath(menuData);
             }
-            return menuData.map(item => {
+            return menuData.map((item) => {
                 const menuItem = { ...item };
                 delete menuItem.children;
                 return menuItem;
@@ -44,9 +43,6 @@ export default {
         },
     },
     mutations: {
-        setDevice(state, isMobile) {
-            state.isMobile = isMobile;
-        },
         setTheme(state, theme) {
             state.theme = theme;
         },
@@ -92,7 +88,7 @@ export default {
         },
         setCustomTitle(state, { path, title }) {
             if (title) {
-                const obj = state.customTitles.find(item => item.path === path);
+                const obj = state.customTitles.find((item) => item.path === path);
                 if (obj) {
                     obj.title = title;
                 } else {

src/pages/frame/view/template/PageTemplateView.vue

 <template>
     <page-layout :desc="desc" :linkList="linkList">
-        <div v-if="this.extraImage && !isMobile" slot="extra" :class="$style.extraImg">
+        <div v-if="extraImage" slot="extra" :class="$style.extraImg">
             <img :src="extraImage" />
         </div>
         <router-view ref="page" />
@@ -20,7 +20,7 @@ export default {
         };
     },
     computed: {
-        ...mapState('settingModule', ['isMobile', 'multiPage']),
+        ...mapState('settingModule', ['multiPage']),
         desc() {
             return this.page?.desc;
         },

src/pages/xunjian/task_managment/center/detail.vue

 <template>
     <Wraper :hidden="hidden" noFooter>
-        <Table :url="tableUrl" rowKey="taskId" noPadding :buttons="buttons" :scroll="scroll" :width="600">
+        <Table
+            :url="tableUrl"
+            rowKey="taskId"
+            noPadding
+            :buttons="buttons"
+            :scroll="scroll"
+            :width="600"
+            ref="table"
+        >
             <template #search="{ query }">
                 <MoreItem label="开始时间">
                     <a-date-picker
@@ -99,6 +107,10 @@
                 </MoreItem>
             </template>
 
+            <template #drawer="drawer">
+                <ViewDetailCom v-bind="drawer" />
+            </template>
+
             <a-table-column title="巡检项目" data-index="taskName" />
             <a-table-column title="参考值" data-index="referenceValue" width="150px" />
             <a-table-column title="采集数据" data-index="value" width="150px" />
@@ -109,6 +121,7 @@
         </Table>
     </Wraper>
 </template>
+
 <script>
 import Table from '@/components/table/table.vue';
 import Wraper from '@/components/table/wraper.vue';
@@ -116,10 +129,12 @@ import UrlSelect from '@/components/MySelect/url_select.vue';
 import SearchSelect from '@/components/MySelect/search_select.vue';
 import langUtils from '@/utils/langUtils';
 import MoreItem from '@/components/table/more_item.vue';
+import ViewDetailCom from './view_detail.vue';
 
 export default {
     props: { hidden: Function, row: Object },
-    components: { Table, Wraper, SearchSelect, UrlSelect, MoreItem },
+    components: { Table, Wraper, SearchSelect, UrlSelect, MoreItem, ViewDetailCom },
+
     data() {
         return {
             scroll: { x: 1200 },
@@ -152,6 +167,7 @@ export default {
     methods: {
         viewDetail(row) {
             console.log(row);
+            this.$refs.table.show({ row, title: '备注 & 附件' });
         },
     },
 };

src/pages/xunjian/task_managment/center/view_detail.vue

+<template>
+    <Wraper noFooter :hidden="hidden">
+        <span>备注：</span>
+        <div style="min-height: 100px" class="tw-font-medium tw-mt-2">{{ detailData.inspectionRemark }}</div>
+
+        <a-tabs>
+            <!-- Todo -->
+            <a-tab-pane key="1" tab="图片"></a-tab-pane>
+            <a-tab-pane key="2" tab="视频"></a-tab-pane>
+        </a-tabs>
+    </Wraper>
+</template>
+
+<script>
+import Wraper from '@/components/table/wraper.vue';
+import { getRangerInspectionTaskDetailApi } from '@/api';
+
+export default {
+    props: { hidden: Function, row: Object },
+    components: { Wraper },
+    data() {
+        return {
+            detailData: {},
+        };
+    },
+
+    async mounted() {
+        this.detailData = await getRangerInspectionTaskDetailApi(this.row.taskId);
+        console.log(this.detailData);
+    },
+};
+</script>

src/utils/commonUtil.js

-//enquire.js 纯 JavaScript 实现的 CSS 媒体查询库
-import enquireJs from "enquire.js";
-
 export function isDef(v) {
     return v !== undefined && v !== null;
 }
@@ -18,19 +15,7 @@ export function remove(arr, item) {
 }
 
 export function isRegExp(v) {
-    return _toString.call(v) === "[object RegExp]";
-}
-
-export function enquireScreen(call) {
-    const handler = {
-        match: function() {
-            call && call(true);
-        },
-        unmatch: function() {
-            call && call(false);
-        },
-    };
-    enquireJs.register("only screen and (max-width: 767.99px)", handler);
+    return _toString.call(v) === '[object RegExp]';
 }
 
 const _toString = Object.prototype.toString;