Merge branch 'master' of http://git.techwx.com/framework/SMO

src/assets/json/authMenuList.json

@@ -1,21 +1,6 @@
 {
     "code": 200,
     "data": [{
-            "path": "/home/index",
-            "name": "home",
-            "component": "/home/index",
-            "meta": {
-                "icon": "alarm",
-                "iconActive": "alarmActive",
-                "title": "首页",
-                "isLink": "",
-                "isHide": false,
-                "isFull": false,
-                "isAffix": true,
-                "isKeepAlive": true
-            }
-        },
-        {
             "path": "/monitoringAlarms",
             "name": "monitoringAlarms",
             "redirect": "/alarm/allData",
@@ -32,7 +17,7 @@
             "children": [{
                     "path": "/alarm/allData",
                     "name": "allData",
-                    "component": "/proTable/useTreeFilter/index",
+                    "component": "/alarm/allData/index",
                     "meta": {
                         "title": "全网实时数据监测报警",
                         "isLink": "",

src/components/ProTable/index.vue

@@ -1,16 +1,4 @@
-<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->
-
 <template>
-  <!-- 查询表单 -->
-  <SearchForm
-    v-show="isShowSearch"
-    :search="_search"
-    :reset="_reset"
-    :columns="searchColumns"
-    :search-param="searchParam"
-    :search-col="searchCol"
-  />
-
   <!-- 表格主体 -->
   <div class="card table-main">
     <!-- 表格头部 操作按钮 -->
@@ -20,13 +8,11 @@
       </div>
       <div v-if="toolButton" class="header-button-ri">
         <slot name="toolButton">
-          <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
-          <el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
-          <el-button
-            v-if="showToolButton('search') && searchColumns?.length"
-            :icon="Search"
-            circle
-            @click="isShowSearch = !isShowSearch"
+          <img
+            class="setting"
+            src="@/assets/images/setting.png"
+            v-if="showToolButton('setting') && columns.length"
+            @click="openColSetting"
           />
         </slot>
       </div>
@@ -110,9 +96,7 @@ import { useTable } from "@/hooks/useTable";
 import { useSelection } from "@/hooks/useSelection";
 import { BreakPoint } from "@/components/Grid/interface";
 import { ColumnProps, TypeProps } from "@/components/ProTable/interface";
-import { Refresh, Operation, Search } from "@element-plus/icons-vue";
 import { generateUUID, handleProp } from "@/utils";
-import SearchForm from "@/components/SearchForm/index.vue";
 import Pagination from "./components/Pagination.vue";
 import ColSetting from "./components/ColSetting.vue";
 import TableColumn from "./components/TableColumn.vue";
@@ -129,7 +113,7 @@ export interface ProTableProps {
   pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
   initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
   border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
-  toolButton?: ("refresh" | "setting" | "search")[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  toolButton?: "setting"[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
   rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
   searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
 }
@@ -155,9 +139,6 @@ const uuid = ref("id-" + generateUUID());
 // column 列类型
 const columnTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
 
-// 是否显示搜索模块
-const isShowSearch = ref(true);
-
 // 控制 ToolButton 显示
 const showToolButton = (key: "refresh" | "setting" | "search") => {
   return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
@@ -274,16 +255,6 @@ const emit = defineEmits<{
   dragSort: [{ newIndex?: number; oldIndex?: number }];
 }>();
 
-const _search = () => {
-  search();
-  emit("search");
-};
-
-const _reset = () => {
-  reset();
-  emit("reset");
-};
-
 // 表格拖拽排序
 const dragSort = () => {
   const tbody = document.querySelector(`#${uuid.value} tbody`) as HTMLElement;
@@ -320,3 +291,12 @@ defineExpose({
   enumMap
 });
 </script>
+<style>
+.setting {
+  height: 20px;
+  width: 20px;
+  margin-top: 10px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+</style>

src/config/index.ts

@@ -1,7 +1,7 @@
 // ? 全局默认配置项
 
 // 首页地址（默认）
-export const HOME_URL: string = "/home/index";
+export const HOME_URL: string = "/alarm/allData";
 
 // 登录页地址（默认）
 export const LOGIN_URL: string = "/login";

src/layouts/LayoutClassic/index.vue

@@ -15,7 +15,7 @@
     </el-header>
     <el-container class="classic-content">
       <el-aside>
-        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px', marginRight: isCollapse ? '0px' : '10px' }">
           <el-scrollbar>
             <el-menu
               :router="false"

src/layouts/LayoutVertical/index.vue

@@ -2,7 +2,7 @@
 <template>
   <el-container class="layout">
     <el-aside>
-      <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+      <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px', marginRight: isCollapse ? '0px' : '10px' }">
         <div class="logo flx-center">
           <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
           <span v-show="!isCollapse" class="logo-text">{{ title }}</span>

src/layouts/components/Header/components/Avatar.vue

@@ -2,7 +2,7 @@
   <el-dropdown trigger="click">
     <div class="avatar-box">
       <div class="avatar">
-        <img src="@/assets/images/avatar.gif" alt="avatar" />
+        <img src="@/assets/images/avatar.png" alt="avatar" />
       </div>
       <div class="username">{{ username }}</div>
       <img class="chevron-down" src="@/assets/images/chevron_down.png" />

src/layouts/components/Header/components/Message.vue

@@ -7,8 +7,8 @@
         </el-badge>
       </template>
       <el-tabs v-model="activeName">
-        <el-tab-pane label="通知(5)" name="first">
-          <div class="message-list">
+        <div>
+          <div class="message-list" v-if="false">
             <div class="message-item">
               <img src="@/assets/images/msg01.png" alt="" class="message-icon" />
               <div class="message-content">
@@ -16,48 +16,12 @@
                 <span class="message-date">一分钟前</span>
               </div>
             </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg02.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Admin 💙</span>
-                <span class="message-date">一小时前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg03.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Admin 💚</span>
-                <span class="message-date">半天前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg04.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 Admin 💜</span>
-                <span class="message-date">一星期前</span>
-              </div>
-            </div>
-            <div class="message-item">
-              <img src="@/assets/images/msg05.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连Admin 💛</span>
-                <span class="message-date">一个月前</span>
-              </div>
-            </div>
           </div>
-        </el-tab-pane>
-        <el-tab-pane label="消息(0)" name="second">
-          <div class="message-empty">
+          <div class="message-empty" v-else>
             <img src="@/assets/images/notData.png" alt="notData" />
             <div>暂无消息</div>
           </div>
-        </el-tab-pane>
-        <el-tab-pane label="待办(0)" name="third">
-          <div class="message-empty">
-            <img src="@/assets/images/notData.png" alt="notData" />
-            <div>暂无待办</div>
-          </div>
-        </el-tab-pane>
+        </div>
       </el-tabs>
     </el-popover>
   </div>

src/styles/element.scss

@@ -141,6 +141,8 @@
       border-bottom: 1px solid #C7E2FF;
     }
 
+
+
   .el-table__header,
    .el-table__body {
       border-color:#C7E2FF;
@@ -150,13 +152,17 @@
       border-color: #C7E2FF;
     }
 
+   .el-table__body tr.el-table__row--striped td.el-table__cell {
+      background: #006FE808;
+    }
+
 
     .el-table__header th {
       height: 45px;
       font-size: 14px;
       font-weight: normal;
       color: var(--el-text-color-primary);
-      background: #006FE810;
+      background: #006FE820;
     }
 
 

src/views/alarm/allData/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      :columns="columns"
+      :request-api="getTableList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+      @drag-sort="sortTable"
+    >
+      <!-- 表格 搜索 按钮 -->
+      <template #tableHeader="">
+        <el-form :model="queryParams" label-width="auto" :inline="true">
+          <el-form-item label="自动站:">
+            <el-select v-model="queryParams.name" placeholder="请选择自动站" clearable style="width: 200px">
+              <el-option label="站1" value="1" />
+              <el-option label="站2" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery"> 查询 </el-button>
+            <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </ProTable>
+  </div>
+</template>
+
+<script setup lang="ts" name="useProTable">
+import { ref, reactive } from "vue";
+import { User } from "@/api/interface";
+import { ElMessage } from "element-plus";
+import ProTable from "@/components/ProTable/index.vue";
+import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
+import { getUserList } from "@/api/modules/user";
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>();
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({ type: 1 });
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+  return {
+    list: data.list,
+    total: data.total
+  };
+};
+
+const queryParams = ref({
+  name: "",
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 查询功能
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+};
+
+//搜索功能
+const resetQuery = () => {
+  queryParams.value.pageNum = 1;
+};
+
+// 翻页
+const getTableList = (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params));
+  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
+  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
+  delete newParams.createTime;
+  return getUserList(newParams);
+};
+
+// 表格配置项
+const columns = reactive<ColumnProps<User.ResUserList>[]>([
+  { prop: "username", label: "站号" },
+  { prop: "gender", label: "性别" },
+  { prop: "user.detail.age", label: "年龄" },
+  { prop: "idCard", label: "身份证号", search: { el: "input" } },
+  { prop: "email", label: "邮箱" },
+  { prop: "address", label: "居住地址" },
+  { prop: "status", label: "用户状态" },
+  { prop: "createTime", label: "创建时间", width: 180 }
+]);
+
+// 表格拖拽排序
+const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
+  console.log(newIndex, oldIndex);
+  console.log(proTable.value?.tableData);
+  ElMessage.success("修改列表排序成功");
+};
+</script>

src/views/proTable/useProTable/index.vue

@@ -8,11 +8,11 @@
       :data-callback="dataCallback"
       @drag-sort="sortTable"
     >
-      <!-- 表格 header 按钮 -->
+      <!-- 表格 搜索 按钮 -->
       <template #tableHeader="scope">
-        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增用户</el-button>
-        <el-button v-auth="'batchAdd'" type="primary" :icon="Upload" plain @click="batchAdd">批量添加用户</el-button>
-        <el-button v-auth="'export'" type="primary" :icon="Download" plain @click="downloadFile">导出用户数据</el-button>
+        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增用户</el-button>
+        <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加用户</el-button>
+        <el-button type="primary" :icon="Download" plain @click="downloadFile">导出用户数据</el-button>
         <el-button type="primary" plain @click="toDetail">To 子集详情页面</el-button>
         <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
           批量删除用户