修改菜单项 完成用户管理和校园安全界面样式

package.json

@@ -29,6 +29,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
-    "vite": "^4.1.0"
+    "fast-glob": "^3.3.2",
+    "vite": "^4.1.0",
+    "vite-plugin-svg-icons": "^2.0.1"
   }
 }

src/components/SvgIcon/index.vue

@@ -1,81 +1,21 @@
 <template>
-  <div class="icon-wrapper" :style="wd">
-    <svg class="icon" aria-hidden="true" :style="wd">
-      <use :xlink:href="iconName"></use>
-    </svg>
-  </div>
+  <svg
+    :class="'svg-icon ' + ($attrs.iconClass ? $attrs.iconClass : '')"
+    aria-hidden="true"
+  >
+    <use class="svg-use" :href="'#' + $attrs.iconName" />
+  </svg>
 </template>
- 
-<script>
-// 引入从iconfont 下载的symbox文件
-// import '@/assets/icons/iconfont-svg.js'
 
-// 引入本地的svg文件
-// 定义一个加载目录的函数
-const requireAll = (requireContext) =>
-  requireContext.keys().map(requireContext);
-const req = require.context("@/assets/icons/svg", false, /\.svg$/);
-// 加载目录下的所有的 svg 文件
-requireAll(req);
-// console.log('I: 加载svg文件:', req.keys())
-export default {
-  name: "IconSvg",
-  props: {
-    name: String,
-    prefix: {
-      type: String,
-      default: "icon-",
-    },
-    W: {
-      type: Number,
-      default: 28,
-    },
-    H: {
-      type: Number,
-      default: 28,
-    },
-  },
-  mounted() {},
-  computed: {
-    iconName() {
-      let name = `#${this.prefix}${this.name}`;
-      return name;
-    },
-    wd() {
-      const style = { width: this.W + "px", height: this.H + "px" };
-      return style;
-    },
-  },
-};
-</script>
- 
+<script setup></script>
+
 <style scoped>
-/*.icon-wrapper {
-  display: inline-block;
-}
-.icon {
-  width: 100%;
-  height: 100%;
-  vertical-align: -0.15em;
-  fill: currentColor;
+.svg-icon {
+  vertical-align: -0.1em;
+  /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
+  /* fill: currentColor; */
+  /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
   overflow: hidden;
-}*/
-
-.icon-wrapper {
-  /* Using currentColor above lets
-  us use `color` for changing the color
-  of our icons: */
-  color: red;
-
-  /* The width and height of the SVG
-  was previously set to 1em.
-  This allows us to use `font-size`
-  to change the size of our icon: */
-}
-
-.icon {
-  display: inline-block;
-  color: #444444;
-  fill: currentColor;
+  margin: auto auto;
 }
-</style>
+</style>

src/layout/sidebar/SidevarItem copy1.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="box-item">
+    <el-menu class="el-menu-vertical-demo" text-color="#fff" active-color="rgba(9, 101, 98, 1)"
+      :default-active="activeIndex" :collapse="menuClose" @select="handleSelect" :router="true">
+      <!-- :default-openeds="[34]" -->
+      <div class="logo el-menu-item">
+        <el-icon :size="20"><img src="@/assets/logo.png" style="width: 30px; height: 24px" /></el-icon>
+      </div>
+      <!-- 订单管理 -->
+      <el-sub-menu :index="12">
+        <template #title>
+          <img v-if="activeIndex == '/seniorCelebrity/order' ||
+            activeIndex == '/seniorCelebrity/orderEvaluate'
+            " src="@/assets/orderS.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <img v-else src="@/assets/order.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <span>订单管理</span>
+        </template>
+        <el-menu-item index="/seniorCelebrity/order">
+          <template #title>
+            <span>订单管理</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/seniorCelebrity/orderEvaluate">
+          <template #title>
+            <span>订单评价</span>
+          </template>
+        </el-menu-item>
+      </el-sub-menu>
+      <!-- 房态管理 -->
+      <el-sub-menu :index="34">
+        <template #title>
+          <img v-if="activeIndex == '/seniorCelebrity/houseState' ||
+            activeIndex == '/seniorCelebrity/housePrice'
+            " src="@/assets/roomStateC.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <img v-else src="@/assets/roomState.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <span>房态管理</span>
+        </template>
+        <el-menu-item index="/seniorCelebrity/houseState">
+          <template #title>
+            <span>房态管理</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/seniorCelebrity/housePrice">
+          <template #title>
+            <span>房价管理</span>
+          </template>
+        </el-menu-item>
+      </el-sub-menu>
+      <!-- 台账管理 -->
+      <el-menu-item index="/seniorCelebrity/ledger">
+        <img v-if="activeIndex == '/seniorCelebrity/ledger'" src="@/assets/ledgerS.png" alt=""
+          style="width: 22px; height: 22px; margin: 0 18px" />
+        <img v-else src="@/assets/ledger.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+        <span>台账管理</span>
+      </el-menu-item>
+      <!-- 民宿管理 -->
+      <el-sub-menu :index="56">
+        <template #title>
+          <img v-if="activeIndex == '/seniorCelebrity/houseInfo' ||
+            activeIndex == '/seniorCelebrity/houseType' ||
+            activeIndex == '/seniorCelebrity/houseList'
+            " src="@/assets/houseS.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
+          <img v-else src="@/assets/house.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
+          <span>民宿管理</span>
+        </template>
+        <el-menu-item index="/seniorCelebrity/houseInfo">
+          <template #title>
+            <!-- <img src="@/assets/home.png" alt="" /> -->
+            <span>民宿信息</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/seniorCelebrity/houseType">
+          <template #title>
+            <!-- <img src="@/assets/home.png" alt="" /> -->
+            <span>房型管理</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/seniorCelebrity/houseList">
+          <template #title>
+            <!-- <img src="@/assets/home.png" alt="" /> -->
+            <span>房源信息</span>
+          </template>
+        </el-menu-item>
+      </el-sub-menu>
+      <!-- 流程管理 -->
+      <el-sub-menu :index="78">
+        <template #title>
+          <img v-if="activeIndex == '/seniorCelebrity/roomFlow'" src="@/assets/roomFlowC.png" alt=""
+            style="width: 22px; height: 22px; margin: 0 18px" />
+          <img v-else src="@/assets/roomFlow.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <span>流程管理</span>
+        </template>
+        <el-menu-item index="/seniorCelebrity/roomFlow">
+          <template #title>
+            <span>我发起的</span>
+          </template>
+        </el-menu-item>
+      </el-sub-menu>
+      <!-- 账号管理 -->
+      <el-menu-item index="/seniorCelebrity/account" v-if="store.state.user.level == 2">
+        <img v-if="activeIndex == '/seniorCelebrity/account'" src="@/assets/systemS.png" alt=""
+          style="width: 20px; height: 20px; margin: 0 20px" />
+        <img v-else src="@/assets/system.png" alt="" style="width: 20px; height: 20px; margin: 0 20px" />
+        <span>账号管理</span>
+      </el-menu-item>
+      <!-- 服务商城 -->
+      <el-menu-item index="/seniorCelebrity/serviceMall">
+        <img v-if="activeIndex == '/seniorCelebrity/serviceMall'" src="@/assets/shop_s.png" alt=""
+          style="width: 20px; height: 20px; margin: 0 20px" />
+        <img v-else src="@/assets/shop.png" alt="" style="width: 20px; height: 20px; margin: 0 20px" />
+        <span>服务商城</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted, watch, reactive } from "vue";
+import { useStore } from "vuex";
+
+import { useRouter } from "vue-router";
+
+const store = useStore();
+const router = useRouter();
+
+const menuClose = ref(false);
+const activeIndex = ref(1);
+const acitveItems = reactive({ list: [] });
+
+watch(
+  () => store.state.user.collapse,
+  (newValue, oldValue) => {
+    menuClose.value = newValue;
+  }
+);
+watch(
+  () => store.state.user.activeIndex,
+  (newValue, oldValue) => {
+    console.log(newValue);
+    activeIndex.value = newValue;
+  }
+);
+
+const handleSelect = (key, keyPath) => {
+  // store.commit("indexUp", key);
+  // activeIndex.value = key;
+  // sessionStorage.setItem("sidevarItem", key);
+  console.log(key, keyPath);
+
+  router.push({
+    path: `${key}`,
+  });
+
+  activeIndex.value = key;
+  store.commit("indexUp", key);
+  sessionStorage.setItem("sidevarItem", key);
+  // if (activeIndex.value == 1) {
+  //   router.push({
+  //     path: `/seniorCelebrity/order`,
+  //   });
+  // }
+  // if (activeIndex.value == 2) {
+  //   router.push({
+  //     path: `/seniorCelebrity/ledger`,
+  //   });
+  // }
+
+  // if (activeIndex.value == 3) {
+  //   router.push({
+  //     path: `/seniorCelebrity/houseInfo`,
+  //   });
+  // }
+  // if (activeIndex.value == 4) {
+  //   router.push({
+  //     path: `/seniorCelebrity/houseType`,
+  //   });
+  // }
+  // if (activeIndex.value == 5) {
+  //   router.push({
+  //     path: `/seniorCelebrity/houseList`,
+  //   });
+  // }
+  // if (activeIndex.value == 6) {
+  //   router.push({
+  //     path: `/seniorCelebrity/account`,
+  //   });
+  // }
+};
+onBeforeMount(() => {
+  activeIndex.value = sessionStorage.getItem("sidevarItem");
+});
+</script>
+
+<style lang="scss" scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  // min-height: 400px;
+}
+
+.el-menu {
+  width: 100%;
+  height: 100%;
+  // background: linear-gradient(
+  //   0deg,
+  //   rgba(134, 132, 255, 1) 0%,
+  //   rgba(60, 80, 232, 1) 100%
+  // );
+  background: rgba(24, 51, 82, 1);
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
+
+  .logo {
+    height: 65px;
+    color: rgb(255, 255, 255);
+    cursor: default;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .logo:hover {
+    background-color: transparent !important;
+  }
+
+  .el-sub-menu {
+    .el-menu-item {
+      // background-color: rgba(255, 255, 255, 1);
+      // color: rgba(9, 101, 98, 1);
+      padding: 0 20px 0 78px;
+    }
+
+    :deep(.el-tooltip__trigger) {
+      padding: 0 20px;
+    }
+
+    :deep(.el-sub-menu__title):hover {
+      color: rgba(18, 38, 61, 1);
+      background-color: rgba(18, 38, 61, 1);
+
+      span {
+        color: #fff;
+      }
+    }
+
+    .el-menu--inline {
+      background-color: rgba(9, 101, 98, 1);
+    }
+  }
+
+  .el-menu {
+    .el-menu-item {
+      background-color: rgba(24, 51, 82, 1);
+      // padding-left: 30px;
+    }
+
+    .el-menu-item:hover {
+      color: #fff;
+      background-color: rgba(18, 38, 61, 1);
+    }
+  }
+
+  .el-sub-menu:hover {
+    color: #fff;
+  }
+
+  .el-menu-item:hover {
+    background-color: rgba(18, 38, 61, 1);
+    color: #fff;
+  }
+
+  .el-menu-item.is-active {
+    background-color: rgba(18, 38, 61, 1);
+    color: #fff;
+  }
+}
+
+// .el-menu-item.is-active {
+//   box-sizing: border-box;
+//   // background-color: #fff;
+//   background-color: rgba(111, 182, 184, 1);
+//   color: #fff;
+// }
+.el-sub-menu.is-active {
+  :deep(.el-sub-menu__title) {
+    // border: 1px solid red;
+    color: #fff !important;
+    background-color: rgba(18, 38, 61, 1);
+  }
+}
+</style>

src/layout/sidebar/SidevarItem.vue

@@ -17,219 +17,119 @@
       </div>
       <!-- 菜单项 -->
       <div v-for="item in roles" class="items">
-        <!-- 房态管理 -->
+        <!-- 系统首页 -->
         <el-menu-item
-          v-if="item.name == 'roomStatus'"
-          index="/hotel/roomStatus"
+          v-if="item.name == 'home'"
+          :index="`/wanzai/${item.name}`"
         >
-          <img
-            v-if="activeIndex == '/hotel/roomStatus'"
-            src="@/assets/icons/roomStatusS.png"
-            alt=""
-            style="width: 22px; height: 22px; margin: 0 18px"
-          />
-          <img
-            v-else
-            src="@/assets/icons/roomStatus.png"
-            alt=""
-            style="width: 22px; height: 22px; margin: 0 18px"
-          />
-          <span>房态管理</span>
+          <svg-icon
+            v-if="activeIndex == '/wanzai/home'"
+            iconName="home_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="home" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
         </el-menu-item>
-        <!-- 房型管理 -->
-        <el-sub-menu :index="item.name" v-if="item.name == 'roomTypes'">
-          <template #title>
-            <img
-              v-if="
-                activeIndex == '/hotel/roomType' ||
-                activeIndex == '/hotel/roomPrice'
-              "
-              src="@/assets/icons/roomTypeS.png"
-              style="width: 20px; height: 20px; margin: 0 20px 0 18px"
-              alt=""
-            />
-            <img
-              v-else
-              src="@/assets/icons/roomType.png"
-              style="width: 20px; height: 20px; margin: 0 20px 0 18px"
-              alt=""
-            />
-            <span>{{ item.meta.title }}</span>
-          </template>
-          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
-            <template #title>
-              <span>{{ i.meta.title }}</span>
-            </template>
-          </el-menu-item>
-        </el-sub-menu>
-        <!-- 订单管理 -->
-        <el-menu-item v-if="item.name == 'order'" index="/hotel/order">
-          <img
-            v-if="activeIndex == '/hotel/order'"
-            src="@/assets/icons/orderS.png"
-            alt=""
-            style="width: 24px; height: 22px; margin: 0 18px"
-          />
-          <img
-            v-else
-            src="@/assets/icons/order.png"
-            alt=""
-            style="width: 22px; height: 22px; margin: 0 18px"
-          />
-          <span>订单管理</span>
+        <!-- 用户管理 -->
+        <el-menu-item
+          :index="`/wanzai/${item.name}`"
+          v-if="item.name == 'user'"
+        >
+          <svg-icon
+            v-if="activeIndex == '/wanzai/user'"
+            iconName="user_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="user" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
         </el-menu-item>
-        <!-- 授权管理 -->
-        <el-sub-menu :index="item.name" v-else-if="item.name == 'classs'">
-          <template #title>
-            <img
-              v-if="
-                activeIndex == '/hotel/class' || activeIndex == '/hotel/process'
-              "
-              src="@/assets/icons/classS.png"
-              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
-              alt=""
-            />
-            <img
-              v-else
-              src="@/assets/icons/class.png"
-              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
-              alt=""
-            />
-            <span>{{ item.meta.title }}</span>
-          </template>
-          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
-            <template #title>
-              <span>{{ i.meta.title }}</span>
-            </template>
-          </el-menu-item>
-        </el-sub-menu>
-        <!-- 统计报表 -->
-        <el-menu-item v-if="item.name == 'statement'" index="/hotel/statement">
-          <img
-            v-if="activeIndex == '/hotel/statement'"
-            src="@/assets/icons/statementS.png"
-            alt=""
-            style="width: 24px; height: 22px; margin: 0 18px"
-          />
-          <img
-            v-else
-            src="@/assets/icons/statement.png"
-            alt=""
-            style="width: 22px; height: 22px; margin: 0 18px"
-          />
-          <span>统计报表</span>
+        <!-- 身份管理 -->
+        <el-menu-item
+          v-if="item.name == 'identity'"
+          :index="`/wanzai/${item.name}`"
+        >
+          <svg-icon
+            v-if="activeIndex == '/wanzai/identity'"
+            iconName="identity_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="identity" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
         </el-menu-item>
-        <!-- 设备管理 -->
-        <el-sub-menu :index="item.name" v-else-if="item.name == 'doorLocks'">
-          <template #title>
-            <img
-              v-if="
-                activeIndex == '/hotel/doorLock' ||
-                activeIndex == '/hotel/meter'
-              "
-              src="@/assets/icons/doorLockS.png"
-              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
-              alt=""
-            />
-            <img
-              v-else
-              src="@/assets/icons/doorLock.png"
-              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
-              alt=""
-            />
-            <span>{{ item.meta.title }}</span>
-          </template>
-          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
-            <template #title>
-              <span>{{ i.meta.title }}</span>
-            </template>
-          </el-menu-item>
-        </el-sub-menu>
-        <!-- 组织架构 -->
-        <el-sub-menu :index="item.name" v-else-if="item.name == 'users'">
+        <!-- 应用管理 -->
+        <el-menu-item
+          :index="`/wanzai/${item.name}`"
+          v-if="item.name == 'apply'"
+        >
+          <svg-icon
+            v-if="activeIndex == '/wanzai/apply'"
+            iconName="apply_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="apply" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
+        </el-menu-item>
+        <!-- 能耗管理 -->
+        <el-menu-item
+          v-if="item.name == 'energy'"
+          :index="`/wanzai/${item.name}`"
+        >
+          <svg-icon
+            v-if="activeIndex == '/wanzai/energy'"
+            iconName="energy_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="energy" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
+        </el-menu-item>
+        <!-- 校园安全 -->
+        <el-menu-item
+          :index="`/wanzai/${item.name}`"
+          v-if="item.name == 'safety'"
+        >
+          <svg-icon
+            v-if="activeIndex == '/wanzai/safety'"
+            iconName="safety_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="safety" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
+        </el-menu-item>
+        <!-- 访客预约 -->
+        <el-menu-item
+          :index="`/wanzai/${item.name}`"
+          v-if="item.name == 'caller'"
+        >
+          <svg-icon
+            v-if="activeIndex == '/wanzai/caller'"
+            iconName="caller_s"
+            class="iconClass"
+          ></svg-icon>
+          <svg-icon v-else iconName="caller" class="iconClass"></svg-icon>
+          <span>{{ item.meta.title }}</span>
+        </el-menu-item>
+        <!-- 系统通知 -->
+        <el-sub-menu :index="item.name" v-if="item.name == 'system'">
           <template #title>
-            <img
+            <svg-icon
               v-if="
-                activeIndex == '/hotel/user' || activeIndex == '/hotel/roles'
+                activeIndex == '/wanzai/info' ||
+                activeIndex == '/wanzai/screenShot' ||
+                activeIndex == '/wanzai/roles'
               "
-              src="@/assets/icons/userS.png"
-              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
-              alt=""
-            />
-            <img
-              v-else
-              src="@/assets/icons/user.png"
-              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
-              alt=""
-            />
+              iconName="system_s"
+              class="iconClass"
+            ></svg-icon>
+            <svg-icon v-else iconName="system" class="iconClass"></svg-icon>
             <span>{{ item.meta.title }}</span>
           </template>
-          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
+          <el-menu-item v-for="i in item.children" :index="`/wanzai/${i.name}`">
             <template #title>
               <span>{{ i.meta.title }}</span>
             </template>
           </el-menu-item>
         </el-sub-menu>
-        <!-- 账号管理 -->
-        <el-menu-item v-if="item.name == 'account'" index="/hotel/account">
-          <img
-            v-if="activeIndex == '/hotel/account'"
-            src="@/assets/icons/accountS.png"
-            alt=""
-            style="width: 24px; height: 22px; margin: 0 18px"
-          />
-          <img
-            v-else
-            src="@/assets/icons/account.png"
-            alt=""
-            style="width: 22px; height: 22px; margin: 0 18px"
-          />
-          <span>账号管理</span>
-        </el-menu-item>
-        <!-- 系统通知 -->
-        <el-menu-item v-if="item.name == 'system'" index="/hotel/system">
-          <img
-            v-if="activeIndex == '/hotel/system'"
-            src="@/assets/icons/systemS.png"
-            alt=""
-            style="width: 24px; height: 22px; margin: 0 18px"
-          />
-          <img
-            v-else
-            src="@/assets/icons/system.png"
-            alt=""
-            style="width: 22px; height: 22px; margin: 0 18px"
-          />
-          <span>系统通知</span>
-        </el-menu-item>
       </div>
-
-      <!-- 民宿管理 -->
-      <!-- <el-sub-menu :index="56">
-        <template #title>
-          <img v-if="activeIndex == '/seniorCelebrity/houseInfo' ||
-            activeIndex == '/seniorCelebrity/houseType' ||
-            activeIndex == '/seniorCelebrity/houseList'
-            " src="@/assets/houseS.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
-          <img v-else src="@/assets/house.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
-          <span>民宿管理</span>
-        </template>
-        <el-menu-item index="/seniorCelebrity/houseInfo">
-          <template #title>
-            <span>民宿信息</span>
-          </template>
-        </el-menu-item>
-        <el-menu-item index="/seniorCelebrity/houseType">
-          <template #title>
-            <span>房型管理</span>
-          </template>
-        </el-menu-item>
-        <el-menu-item index="/seniorCelebrity/houseList">
-          <template #title>
-            <span>房源信息</span>
-          </template>
-        </el-menu-item>
-      </el-sub-menu> -->
     </el-menu>
   </div>
 </template>
@@ -289,6 +189,11 @@ onBeforeMount(() => {
 </script>
 
 <style lang="scss" scoped>
+.iconClass {
+  width: 1.5em;
+  height: 1.5em;
+  margin: 0 20px !important;
+}
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   // width: 220px;
   // min-height: 400px;

src/main.js

@@ -9,6 +9,9 @@ import App from "./App.vue";
 import router from "@/router";
 import store from "@/store";
 
+import SvgIcon from "./components/SvgIcon/index.vue";
+import "virtual:svg-icons-register";
+
 const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
@@ -20,5 +23,7 @@ app.use(ElementPlus, {
 app.use(router);
 app.use(store);
 
+app.component("svg-icon", SvgIcon);
+
 app.mount("#app");
 app.config.devtools = true;

src/router/index.js

@@ -16,100 +16,70 @@ const routes = [
     redirect: "/login",
   },
   {
-    path: "/hotel",
-    name: "hotel",
+    path: "/wanzai",
+    name: "wanzai",
     component: Layout,
     children: [
       {
-        path: "roomStatus",
-        name: "roomStatus",
-        meta: { isAuth: true, title: "房态管理" },
-        component: () => import("@/views/roomStatus/roomStatus.vue"),
+        path: "home",
+        name: "home",
+        meta: { isAuth: true, title: "系统首页" },
+        component: () => import("@/views/home/home.vue"),
       },
       {
-        path: "roomType",
-        name: "roomType",
-        meta: { isAuth: true, title: "房型管理" },
-        component: () => import("@/views/roomType/roomType.vue"),
+        path: "user",
+        name: "user",
+        meta: { isAuth: true, title: "用户管理" },
+        component: () => import("@/views/user/user.vue"),
       },
       {
-        path: "roomPrice",
-        name: "roomPrice",
-        meta: { isAuth: true, title: "房价管理" },
-        component: () => import("@/views/roomPrice/roomPrice.vue"),
+        path: "identity",
+        name: "identity",
+        meta: { isAuth: true, title: "身份管理" },
+        component: () => import("@/views/identity/identity.vue"),
       },
       {
-        path: "order",
-        name: "order",
-        meta: { isAuth: true, title: "订单管理" },
-        component: () => import("@/views/order/order.vue"),
+        path: "apply",
+        name: "apply",
+        meta: { isAuth: true, title: "应用管理" },
+        component: () => import("@/views/apply/apply.vue"),
       },
       {
-        path: "class",
-        name: "class",
-        meta: { isAuth: true, title: "课表管理" },
-        component: () => import("@/views/class/class.vue"),
+        path: "energy",
+        name: "energy",
+        meta: { isAuth: true, title: "能耗管理" },
+        component: () => import("@/views/energy/energy.vue"),
       },
       {
-        path: "process",
-        name: "process",
-        meta: { isAuth: true, title: "流程管理" },
-        component: () => import("@/views/process/process.vue"),
+        path: "safety",
+        name: "safety",
+        meta: { isAuth: true, title: "校园安全" },
+        component: () => import("@/views/safety/safety.vue"),
       },
       {
-        path: "statement",
-        name: "statement",
-        meta: { isAuth: true, title: "统计报表" },
-        component: () => import("@/views/statement/statement.vue"),
+        path: "caller",
+        name: "caller",
+        meta: { isAuth: true, title: "访客预约" },
+        component: () => import("@/views/caller/caller.vue"),
       },
       {
-        path: "user",
-        name: "user",
-        meta: { isAuth: true, title: "用户管理" },
-        component: () => import("@/views/user/user.vue"),
+        path: "info",
+        name: "info",
+        meta: { isAuth: true, title: "基本信息" },
+        component: () => import("@/views/info/info.vue"),
+      },
+      {
+        path: "screenShot",
+        name: "screenShot",
+        meta: { isAuth: true, title: "截屏风险" },
+        component: () => import("@/views/screenShot/screenShot.vue"),
       },
       {
         path: "roles",
         name: "roles",
-        meta: { isAuth: true, title: "角色管理" },
+        meta: { isAuth: true, title: "权限管理" },
         component: () => import("@/views/roles/roles.vue"),
       },
-      {
-        path: "doorLock",
-        name: "doorLock",
-        meta: { isAuth: true, title: "门锁管理" },
-        component: () => import("@/views/doorLock/doorLock.vue"),
-      },
-      {
-        path: "meter",
-        name: "meter",
-        meta: { isAuth: true, title: "水电表管理" },
-        component: () => import("@/views/meter/meter.vue"),
-      },
-      {
-        path: "account",
-        name: "account",
-        meta: { isAuth: true, title: "账号管理" },
-        component: () => import("@/views/account/account.vue"),
-      },
-      {
-        path: "system",
-        name: "system",
-        meta: { isAuth: true, title: "系统设置" },
-        component: () => import("@/views/system/system.vue"),
-      },
-      // {
-      //   path: "icCard",
-      //   name: "icCard",
-      //   meta: { isAuth: true, title: "IC卡管理" },
-      //   component: () => import("@/views/icCard/icCard.vue"),
-      // },
-      // {
-      //   path: "fingerprint",
-      //   name: "fingerprint",
-      //   meta: { isAuth: true, title: "指纹管理" },
-      //   component: () => import("@/views/fingerprint/fingerprint.vue"),
-      // },
     ],
   },
 ];

src/store/modules/user.js

@@ -16,98 +16,55 @@ const state = {
   level: 1,
   roles: [
     {
-      name: "roomStatus",
-      meta: { isAuth: true, title: "房态管理" },
+      name: "home",
+      meta: { isAuth: true, title: "系统首页" },
     },
     // 房型管理
     {
-      name: "roomTypes",
-      meta: { isAuth: true, title: "房型管理", sign: "roomTypes" },
-      children: [
-        {
-          name: "roomType",
-          meta: { isAuth: true, title: "房型管理" },
-        },
-        {
-          name: "roomPrice",
-          meta: { isAuth: true, title: "房价管理" },
-        },
-      ],
+      name: "user",
+      meta: { isAuth: true, title: "用户管理" },
     },
     {
-      name: "order",
-      meta: { isAuth: true, title: "订单管理" },
+      name: "identity",
+      meta: { isAuth: true, title: "身份管理" },
     },
     // 授权管理
     {
-      name: "classs",
-      meta: { isAuth: true, title: "授权管理", sign: "classs" },
-      children: [
-        {
-          name: "class",
-          meta: { isAuth: true, title: "课表管理" },
-        },
-        {
-          name: "process",
-          meta: { isAuth: true, title: "流程管理" },
-        },
-      ],
+      name: "apply",
+      meta: { isAuth: true, title: "应用管理"},
     },
     {
-      name: "statement",
-      meta: { isAuth: true, title: "统计报表" },
+      name: "energy",
+      meta: { isAuth: true, title: "能耗管理" },
     },
     // 设备管理
     {
-      name: "doorLocks",
-      meta: { isAuth: true, title: "设备管理", sign: "doorLocks" },
-      children: [
-        {
-          name: "doorLock",
-          meta: { isAuth: true, title: "门锁管理" },
-        },
-        {
-          name: "meter",
-          meta: { isAuth: true, title: "水电表管理" },
-        },
-      ],
+      name: "safety",
+      meta: { isAuth: true, title: "校园安全" },
     },
     // 组织架构
     {
-      name: "users",
-      meta: { isAuth: true, title: "组织架构", sign: "users" },
+      name: "caller",
+      meta: { isAuth: true, title: "访客预约"},
+    },
+    {
+      name: "system",
+      meta: { isAuth: true, title: "系统通知" },
       children: [
         {
-          name: "user",
-          meta: { isAuth: true, title: "用户管理" },
+          name: "info",
+          meta: { isAuth: true, title: "基本信息" },
+        },
+        {
+          name: "screenShot",
+          meta: { isAuth: true, title: "截屏风险" },
         },
         {
           name: "roles",
-          meta: { isAuth: true, title: "角色管理" },
+          meta: { isAuth: true, title: "权限管理" },
         },
       ],
     },
-
-    {
-      name: "account",
-      meta: { isAuth: true, title: "账号管理" },
-    },
-    {
-      name: "system",
-      meta: { isAuth: true, title: "系统通知" },
-    },
-    // {
-    //   path: "home/ICcard",
-    //   name: "icCard",
-    //   meta: { isAuth: true, title: "IC卡管理" },
-    //   component: () => import("@/views/icCard"),
-    // },
-    // {
-    //   path: "home/fingerprint",
-    //   name: "fingerprint",
-    //   meta: { isAuth: true, title: "指纹管理" },
-    //   component: () => import("@/views/fingerprint"),
-    // },
   ],
   statRoutes: {
     path: "/hotel",

src/views/old/account/account.vue

@@ -0,0 +1,935 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">账号管理</span>
+    </div>
+    <div class="middle">
+      <div class="filter">
+        <div class="condition">
+          <span>状态 </span>
+          <el-select
+            style="width: 180px"
+            v-model="value"
+            class="m-2"
+            placeholder="Select"
+          >
+            <el-option label="全部" value="1" />
+            <el-option label="禁用" value="2" />
+          </el-select>
+        </div>
+        <div class="condition">
+          <span>真实姓名 </span>
+          <el-input
+            clearable
+            v-model="searchInput.adminName"
+            @clear="searchBtn"
+            class="w-50 m-2"
+            placeholder="请输入姓名"
+            style="width: 180px"
+          />
+        </div>
+        <div class="condition">
+          <span>创建日期 </span>
+          <el-date-picker
+            v-model="searchInput.createTime"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="起始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            :prefix-icon="Calendar"
+            placeholder="请选择日期"
+            style="width: 240px"
+          />
+        </div>
+
+        <el-button
+          style="margin-left: 20px"
+          color="rgba(0, 97, 255, 1)"
+          type="primary"
+          class="search"
+          @click="searchBtn"
+          ><el-icon><Search /></el-icon> <span>查询</span></el-button
+        >
+      </div>
+      <!-- 按钮列表 -->
+      <div class="gongneng">
+        <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+          >添加</el-button
+        >
+        <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+          >导出</el-button
+        >
+      </div>
+    </div>
+    <div class="footer" v-loading="loading">
+      <el-table
+        :row-class-name="tableRowClassName"
+        :data="tableData.list"
+        @selection-change="handleSelectionChange"
+        style="width: 100%"
+        :header-cell-style="{
+          background: 'rgba(240, 243, 247, 1)',
+          height: '50px',
+          border: 0,
+        }"
+      >
+        <!-- <el-table-column align="center" type="selection" width="80" /> -->
+        <el-table-column
+          width="120"
+          align="center"
+          label="序号"
+          type="index"
+          index="1"
+        />
+        <el-table-column align="center" prop="corpnPhone" label="账号" />
+        <el-table-column align="center" prop="adminName" label="角色" />
+        <el-table-column align="center" prop="corpnName" label="真实姓名" />
+        <el-table-column align="center" prop="corpnPhone" label="手机号码" />
+        <el-table-column align="center" label="部门">
+          <template #default="{ row }">
+            {{ row.level == 1 ? "管理员" : "超级管理员" }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="remark" label="创建时间" />
+
+        <el-table-column align="center" label="操作" width="220">
+          <template #default="scope">
+            <div class="options">
+              <div class="look" @click="edit(scope.row)">编辑</div>
+              <el-popconfirm
+                width="220"
+                confirm-button-text="确认"
+                cancel-button-text="取消"
+                :icon="InfoFilled"
+                icon-color="#f89626"
+                title="是否删除此账号?"
+                @confirm="del(scope.row)"
+                @cancel="cancelEvent"
+              >
+                <template #reference>
+                  <div class="del">删除</div>
+                </template>
+              </el-popconfirm>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 添加车辆弹窗 -->
+      <el-dialog
+        class="addStaff"
+        v-model="addDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="dialongTitle"
+        align-center
+        width="609"
+        :before-close="cancelAdd"
+      >
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="100px"
+          class="demo-ruleForm"
+          :size="formSize"
+          label-position="left"
+          status-icon
+        >
+          <el-form-item label="用户名 :" prop="adminName">
+            <el-input
+              v-model="ruleForm.adminName"
+              placeholder="请输入用户名"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="姓名 :" prop="corpnName">
+            <el-input
+              v-model="ruleForm.corpnName"
+              placeholder="请输入姓名"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="手机号码 :" prop="corpnPhone">
+            <el-input
+              v-model="ruleForm.corpnPhone"
+              placeholder="请输入手机号码"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="密码 :" prop="password">
+            <el-input
+              v-model="ruleForm.password"
+              placeholder="请输入密码"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="确认密码 :" prop="againPass">
+            <el-input
+              v-model="ruleForm.againPass"
+              placeholder="请再一次输入密码"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="角色 :" prop="level">
+            <el-radio-group v-model="ruleForm.level">
+              <el-radio :label="1" v-if="ruleForm.level == 1">管理员</el-radio>
+              <el-radio :label="2" v-if="ruleForm.level == 2"
+                >超级管理员</el-radio
+              >
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="简介 :" prop="remark">
+            <el-input
+              v-model="ruleForm.remark"
+              :rows="3"
+              type="textarea"
+              placeholder="请输入民宿简介信息"
+            />
+          </el-form-item>
+
+          <el-form-item class="options">
+            <el-button
+              color="rgba(0, 97, 255, 1)"
+              class="queding"
+              type="primary"
+              @click="submitAdd(ruleFormRef)"
+            >
+              确定
+            </el-button>
+            <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
+
+    <!-- 分页组件 -->
+    <div class="pageSize">
+      <span></span>
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, jumper, slot"
+        :total="total"
+        @update:current-page="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import { dayjs } from "element-plus";
+import lodash, { reduce } from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [
+    // {
+    //   phone: 1234,
+    //   adminName: "admin",
+    //   userName: "张三",
+    //   level: 1,
+    //   remark: "测试",
+    // },
+    // {
+    //   phone: 1234,
+    //   adminName: "test",
+    //   userName: "李四",
+    //   level: 1,
+    //   remark: "测试11",
+    // },
+    // {
+    //   phone: 1234,
+    //   adminName: "admin1",
+    //   userName: "张三",
+    //   level: 1,
+    //   remark: "测试",
+    // },
+    // {
+    //   phone: 1234,
+    //   adminName: "admin2",
+    //   userName: "张三",
+    //   level: 1,
+    //   remark: "测试",
+    // },
+  ],
+});
+const activeIndex = ref(); // 默认跳转路由
+const dialongTitle = ref("新增账号"); // 弹窗标题
+
+const searchInput = reactive({
+  adminName: "",
+}); // 搜索按钮数据
+5;
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(); // 当前总数
+const selectData = reactive({
+  list: [],
+}); // 多选框选择的数据
+const api = ref("");
+const addDialogVisible = ref(false); // 控制添加员工弹窗
+
+// 表单数据
+const formSize = ref("default");
+const ruleFormRef = ref();
+const ruleForm = reactive({
+  corpnPhone: "",
+  adminName: "",
+  corpnName: "",
+  level: 1,
+  remark: "",
+  password: "",
+  againPass: "",
+  id: "",
+});
+var checkUserName = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error("请输入用户名）"));
+  }
+
+  var reg = /^[a-zA-Z0-9]{6,16}$/;
+  if (!reg.test(value)) {
+    callback(new Error("必须为6-16个数字或字母！"));
+  } else {
+    callback();
+  }
+};
+var checkFullName = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error("请输入姓名"));
+  }
+
+  var reg = /^[\u4e00-\u9fa5]{2,6}$/;
+  if (!reg.test(value)) {
+    callback(new Error("必须为2-6个汉字！"));
+  } else {
+    callback();
+  }
+};
+var checkPhone = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error("请输入手机号"));
+  }
+  setTimeout(() => {
+    var reg = /^1[3456789]\d{9}$/;
+    if (!reg.test(value)) {
+      callback(new Error("手机号格式不对"));
+    } else {
+      callback();
+    }
+  }, 100);
+};
+// 表单验证
+const rules = reactive({
+  corpnName: [
+    { required: true, message: "姓名不能为空", trigger: "blur" },
+    { validator: checkFullName, trigger: "blur" },
+  ],
+  adminName: [
+    { required: true, message: "用户名不能为空", trigger: "blur" },
+    { validator: checkUserName, trigger: "blur" },
+  ],
+  // ^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$
+  password: [
+    {
+      required: true,
+      message: "密码不能为空",
+      trigger: "blur",
+    },
+    {
+      min: 8,
+      max: 20,
+      pattern:
+        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+      message: "请输入8-20位正确密码（大小写字母·字符·数字）",
+      trigger: "blur",
+    },
+  ],
+  againPass: [
+    {
+      required: true,
+      message: "确认密码不能为空",
+      trigger: "blur",
+    },
+    {
+      min: 8,
+      max: 20,
+      pattern:
+        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+      message: "请输入8-20位正确密码（大小写字母·字符·数字）",
+      trigger: "blur",
+    },
+  ],
+  level: [
+    {
+      required: true,
+      message: "角色不能为空",
+      trigger: "blur",
+    },
+  ],
+  remark: [
+    {
+      required: true,
+      message: "备注不能为空",
+      trigger: "blur",
+    },
+  ],
+  corpnPhone: [
+    {
+      required: true,
+      message: "电话号码不能为空",
+      trigger: "blur",
+    },
+    { validator: checkPhone, trigger: "blur" },
+  ],
+
+  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
+});
+// 获取账户列表
+const getList = async () => {
+  // if (searchInput.account) {
+  //   data.adminName = searchInput.adminName;
+  // }
+  loading.value = true;
+  let data = {
+    page: currentPage.value, // 当前页
+    rows: pageSize.value, // 一页数据条数
+    adminName: searchInput.adminName, //用户名
+    managerId: sessionStorage.getItem("token"),
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/mhotel/managerAdminqueryPage.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+    },
+    params: data,
+  });
+  console.log(res, "账号信息");
+  if (res.data.code == 200) {
+    tableData.list = res.data.data.pageList;
+    total.value = res.data.data.total;
+    loading.value = false;
+    // ElMessage({
+    //   type: "success",
+    //   showClose: true,
+    //   message: res.data.message,
+    //   center: true,
+    // });
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+
+// 添加员工
+const addlist = () => {
+  dialongTitle.value = "新增账号";
+  addDialogVisible.value = true;
+  ruleForm.corpnPhone = "";
+  ruleForm.adminName = "";
+  ruleForm.corpnName = "";
+  ruleForm.level = 1;
+  ruleForm.remake = "";
+  ruleForm.password = "";
+  ruleForm.againPass = "";
+  ruleForm.reamark = "";
+};
+// 取消添加员工
+const cancelAdd = () => {
+  addDialogVisible.value = false;
+  ruleFormRef.value.resetFields();
+};
+//编辑按钮
+const edit = (row) => {
+  dialongTitle.value = "编辑信息";
+  addDialogVisible.value = true;
+  ruleForm.adminName = row.adminName;
+  ruleForm.corpnName = row.corpnName;
+  ruleForm.level = Number(row.level);
+  ruleForm.remark = row.remark;
+  ruleForm.password = row.password;
+  ruleForm.againPass = row.password;
+  ruleForm.corpnPhone = row.corpnPhone;
+  ruleForm.id = row.id;
+};
+// 确认添加员工
+const submitAdd = lodash.debounce(async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      if (dialongTitle.value == "新增账号") {
+        if (ruleForm.password == ruleForm.againPass) {
+          let data = {
+            adminName: ruleForm.adminName,
+            corpnName: ruleForm.corpnName,
+            level: ruleForm.level,
+            remark: ruleForm.remark,
+            password: ruleForm.password,
+            corpnPhone: ruleForm.corpnPhone,
+            managerId: sessionStorage.getItem("token"),
+          };
+          let res = await axios({
+            method: "post",
+            url: api.value + "/mhotel/managerAdmininsertAdminManager.action",
+            headers: {
+              // token: sessionStorage.getItem("token"),
+            },
+            params: data,
+          });
+          console.log(res, "添加账号");
+          if (res.data.code == 200) {
+            getList();
+            ElMessage({
+              type: "success",
+              showClose: true,
+              message: res.data.message,
+              center: true,
+            });
+            addDialogVisible.value = false;
+            ruleFormRef.value.resetFields();
+          } else {
+            ElMessage({
+              type: "error",
+              showClose: true,
+              message: res.data.message,
+              center: true,
+            });
+          }
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: "两次密码输入不一致",
+            center: true,
+          });
+        }
+      } else {
+        if (ruleForm.password == ruleForm.againPass) {
+          let data = {
+            adminName: ruleForm.adminName,
+            corpnName: ruleForm.corpnName,
+            level: ruleForm.level,
+            remark: ruleForm.remark,
+            password: ruleForm.password,
+            corpnPhone: ruleForm.corpnPhone,
+            id: ruleForm.id,
+          };
+          let res = await axios({
+            method: "post",
+            url: api.value + "/mhotel/managerAdminupdateAdminManager.action",
+            headers: {
+              // token: sessionStorage.getItem("token"),
+              // user_head: sessionStorage.getItem("userhead"),
+            },
+            params: data,
+          });
+          // console.log(res, "修改账号");
+          if (res.data.code == 200) {
+            getList();
+            ElMessage({
+              type: "success",
+              showClose: true,
+              message: res.data.message,
+              center: true,
+            });
+            addDialogVisible.value = false;
+            ruleFormRef.value.resetFields();
+          } else {
+            ElMessage({
+              type: "error",
+              showClose: true,
+              message: res.data.message,
+              center: true,
+            });
+          }
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: "两次密码输入不一致",
+            center: true,
+          });
+        }
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+}, 1000);
+
+//删除按钮
+const del = async (row) => {
+  // console.log(row);
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/managerAdmindelAdmin.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+  // console.log(res);
+};
+// 取消删除
+const cancelEvent = () => {
+  ElMessage({
+    type: "info",
+    showClose: true,
+    message: "取消删除",
+    center: true,
+  });
+};
+// 重置密码
+const reset = async (row) => {
+  // console.log(row);
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/managerAdminremovePwd.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+
+// 多选框功能
+// const handleSelectionChange = (val) => {
+//   console.log(val);
+//   selectData.list = val;
+// };
+
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(() => {
+  api.value = store.state.user.api;
+  getList();
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  width: 97.5%;
+  height: 89%;
+  margin: 20px auto;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+    height: 60px;
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: #000;
+    font-size: 18px;
+    font-weight: 600;
+    .camera {
+      margin-right: 15px;
+      color: #4392f7;
+    }
+  }
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 10px 0 0 0;
+      .search {
+        margin-left: 0 !important;
+        color: #fff;
+      }
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+    .gongneng {
+      margin: 10px 0;
+      .el-button {
+        color: #fff;
+        margin-right: 15px;
+      }
+    }
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+  .footer {
+    width: 96%;
+    height: 550px;
+    margin: 10px auto 30px;
+    .el-table--fit {
+      height: 100%;
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 15px;
+        color: #000;
+        .cell {
+          color: #000;
+        }
+      }
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 15px;
+        color: #000;
+      }
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+      :deep(.options) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .reset {
+          color: rgba(9, 101, 98, 1);
+          cursor: pointer;
+        }
+        .look {
+          margin: 0 15px;
+          color: rgba(30, 125, 251, 1);
+          cursor: pointer;
+        }
+        .del {
+          color: rgba(212, 48, 48, 1);
+          cursor: pointer;
+        }
+      }
+    }
+
+    // 添加员工弹窗样式
+    :deep(.addStaff) {
+      //   height: 420px;
+      border-radius: 11px;
+      .el-dialog__header {
+        border-radius: 11px 11px 0 0;
+        background: rgba(237, 241, 245, 1);
+        font-weight: 600;
+        margin: 0;
+        .el-dialog__headerbtn {
+          outline: none;
+        }
+      }
+      .el-dialog__body {
+        padding: 30px 20px 10px 20px;
+        .el-input {
+          width: 200px;
+          .el-input__suffix-inner {
+            color: rgba(61, 81, 232, 1);
+          }
+        }
+
+        .options {
+          margin: 10px 20px 20px 0;
+          width: 100%;
+          .el-form-item__content {
+            display: flex;
+            flex-direction: row-reverse;
+          }
+          .queding {
+            color: #fff;
+            margin-left: 15px;
+          }
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        // background-color: rgba(0, 97, 255, 0.8);
+        border: 1px solid rgba(0, 97, 255, 1);
+        color: rgba(0, 97, 255, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+.el-input {
+  width: 192px;
+}
+</style>

src/views/old/fingerprint/fingerPrint.vue

@@ -0,0 +1,845 @@
+<template>
+    <div class="content-box">
+        <div class="left">
+            <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+            <span class="cameratxt">指纹管理</span>
+        </div>
+        <div class="middle">
+            <div class="filter">
+                <div class="condition">
+                    <span>关键字 : </span>
+                    <el-input clearable v-model="searchInput.adminName" @clear="searchBtn" class="w-50 m-2"
+                        placeholder="请输入用户名" style="width: 150px" />
+                </div>
+
+                <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
+                    @click="searchBtn"><el-icon>
+                        <Search />
+                    </el-icon> <span>查询</span></el-button>
+            </div>
+            <!-- 按钮列表 -->
+            <div class="gongneng">
+                <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"><el-icon>
+                        <CirclePlus />
+                    </el-icon><span>新增账号</span></el-button>
+            </div>
+        </div>
+        <div class="footer" v-loading="loading">
+            <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
+                style="width: 100%" :header-cell-style="{
+                    background: 'rgba(240, 243, 247, 1)',
+                    height: '50px',
+                    border: 0,
+                }">
+                <!-- <el-table-column align="center" type="selection" width="80" /> -->
+                <el-table-column width="150" align="center" label="序号" type="index" index="1" />
+                <el-table-column align="center" prop="corpnPhone" label="手机" />
+                <el-table-column align="center" prop="adminName" label="用户名" />
+                <el-table-column align="center" prop="corpnName" label="姓名" />
+                <el-table-column align="center" label="角色">
+                    <template #default="{ row }">
+                        {{ row.level == 1 ? "管理员" : "超级管理员" }}
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="remark" label="备注" />
+
+                <el-table-column align="center" label="操作" width="220">
+                    <template #default="scope">
+                        <div class="options">
+                            <div class="reset" @click="reset(scope.row)">密码重置</div>
+                            <div class="look" @click="edit(scope.row)">修改</div>
+                            <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
+                                icon-color="#f89626" title="是否删除此账号?" @confirm="del(scope.row)" @cancel="cancelEvent">
+                                <template #reference>
+                                    <div class="del">删除</div>
+                                </template>
+                            </el-popconfirm>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!-- 添加车辆弹窗 -->
+            <el-dialog class="addStaff" v-model="addDialogVisible" :close-on-click-modal="false"
+                :close-on-press-escape="false" :title="dialongTitle" align-center width="609" :before-close="cancelAdd">
+                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
+                    :size="formSize" label-position="left" status-icon>
+                    <el-form-item label="用户名 :" prop="adminName">
+                        <el-input v-model="ruleForm.adminName" placeholder="请输入用户名" clearable />
+                    </el-form-item>
+                    <el-form-item label="姓名 :" prop="corpnName">
+                        <el-input v-model="ruleForm.corpnName" placeholder="请输入姓名" clearable />
+                    </el-form-item>
+                    <el-form-item label="手机号码 :" prop="corpnPhone">
+                        <el-input v-model="ruleForm.corpnPhone" placeholder="请输入手机号码" clearable />
+                    </el-form-item>
+                    <el-form-item label="密码 :" prop="password">
+                        <el-input v-model="ruleForm.password" placeholder="请输入密码" clearable />
+                    </el-form-item>
+                    <el-form-item label="确认密码 :" prop="againPass">
+                        <el-input v-model="ruleForm.againPass" placeholder="请再一次输入密码" clearable />
+                    </el-form-item>
+                    <el-form-item label="角色 :" prop="level">
+                        <el-radio-group v-model="ruleForm.level">
+                            <el-radio :label="1" v-if="ruleForm.level == 1">管理员</el-radio>
+                            <el-radio :label="2" v-if="ruleForm.level == 2">超级管理员</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="简介 :" prop="remark">
+                        <el-input v-model="ruleForm.remark" :rows="3" type="textarea" placeholder="请输入民宿简介信息" />
+                    </el-form-item>
+
+                    <el-form-item class="options">
+                        <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary"
+                            @click="submitAdd(ruleFormRef)">
+                            确定
+                        </el-button>
+                        <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-dialog>
+        </div>
+
+        <!-- 分页组件 -->
+        <el-pagination background :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+    </div>
+</template>
+  
+<script setup>
+import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import { dayjs } from "element-plus";
+import lodash, { reduce } from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+    list: [
+        // {
+        //   phone: 1234,
+        //   adminName: "admin",
+        //   userName: "张三",
+        //   level: 1,
+        //   remark: "测试",
+        // },
+        // {
+        //   phone: 1234,
+        //   adminName: "test",
+        //   userName: "李四",
+        //   level: 1,
+        //   remark: "测试11",
+        // },
+        // {
+        //   phone: 1234,
+        //   adminName: "admin1",
+        //   userName: "张三",
+        //   level: 1,
+        //   remark: "测试",
+        // },
+        // {
+        //   phone: 1234,
+        //   adminName: "admin2",
+        //   userName: "张三",
+        //   level: 1,
+        //   remark: "测试",
+        // },
+    ],
+});
+const activeIndex = ref(); // 默认跳转路由
+const dialongTitle = ref("新增账号"); // 弹窗标题
+
+const searchInput = reactive({
+    adminName: "",
+}); // 搜索按钮数据
+5;
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(); // 当前总数
+const selectData = reactive({
+    list: [],
+}); // 多选框选择的数据
+const api = ref("");
+const addDialogVisible = ref(false); // 控制添加员工弹窗
+
+// 表单数据
+const formSize = ref("default");
+const ruleFormRef = ref();
+const ruleForm = reactive({
+    corpnPhone: "",
+    adminName: "",
+    corpnName: "",
+    level: 1,
+    remark: "",
+    password: "",
+    againPass: "",
+    id: "",
+});
+var checkUserName = (rule, value, callback) => {
+    if (!value) {
+        return callback(new Error("请输入用户名）"));
+    }
+
+    var reg = /^[a-zA-Z0-9]{6,16}$/;
+    if (!reg.test(value)) {
+        callback(new Error("必须为6-16个数字或字母！"));
+    } else {
+        callback();
+    }
+};
+var checkFullName = (rule, value, callback) => {
+    if (!value) {
+        return callback(new Error("请输入姓名"));
+    }
+
+    var reg = /^[\u4e00-\u9fa5]{2,6}$/;
+    if (!reg.test(value)) {
+        callback(new Error("必须为2-6个汉字！"));
+    } else {
+        callback();
+    }
+};
+var checkPhone = (rule, value, callback) => {
+    if (!value) {
+        return callback(new Error("请输入手机号"));
+    }
+    setTimeout(() => {
+        var reg = /^1[3456789]\d{9}$/;
+        if (!reg.test(value)) {
+            callback(new Error("手机号格式不对"));
+        } else {
+            callback();
+        }
+    }, 100);
+};
+// 表单验证
+const rules = reactive({
+    corpnName: [
+        { required: true, message: "姓名不能为空", trigger: "blur" },
+        { validator: checkFullName, trigger: "blur" },
+    ],
+    adminName: [
+        { required: true, message: "用户名不能为空", trigger: "blur" },
+        { validator: checkUserName, trigger: "blur" },
+    ],
+    // ^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$
+    password: [
+        {
+            required: true,
+            message: "密码不能为空",
+            trigger: "blur",
+        },
+        {
+            min: 8,
+            max: 20,
+            pattern:
+                /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+            message: "请输入8-20位正确密码（大小写字母·字符·数字）",
+            trigger: "blur",
+        },
+    ],
+    againPass: [
+        {
+            required: true,
+            message: "确认密码不能为空",
+            trigger: "blur",
+        },
+        {
+            min: 8,
+            max: 20,
+            pattern:
+                /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+            message: "请输入8-20位正确密码（大小写字母·字符·数字）",
+            trigger: "blur",
+        },
+    ],
+    level: [
+        {
+            required: true,
+            message: "角色不能为空",
+            trigger: "blur",
+        },
+    ],
+    remark: [
+        {
+            required: true,
+            message: "备注不能为空",
+            trigger: "blur",
+        },
+    ],
+    corpnPhone: [
+        {
+            required: true,
+            message: "电话号码不能为空",
+            trigger: "blur",
+        },
+        { validator: checkPhone, trigger: "blur" },
+    ],
+
+    // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
+});
+// 获取账户列表
+const getList = async () => {
+    // if (searchInput.account) {
+    //   data.adminName = searchInput.adminName;
+    // }
+    loading.value = true;
+    let data = {
+        page: currentPage.value, // 当前页
+        rows: pageSize.value, // 一页数据条数
+        adminName: searchInput.adminName, //用户名
+        managerId: sessionStorage.getItem("token"),
+    };
+    let res = await axios({
+        method: "get",
+        url: api.value + "/mhotel/managerAdminqueryPage.action",
+        headers: {
+            // token: sessionStorage.getItem("token"),
+        },
+        params: data,
+    });
+    console.log(res, "账号信息");
+    if (res.data.code == 200) {
+        tableData.list = res.data.data.pageList;
+        total.value = res.data.data.total;
+        loading.value = false;
+        // ElMessage({
+        //   type: "success",
+        //   showClose: true,
+        //   message: res.data.message,
+        //   center: true,
+        // });
+    } else {
+        loading.value = false;
+        ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+    getList();
+}, 300);
+
+// 添加员工
+const addlist = () => {
+    dialongTitle.value = "新增账号";
+    addDialogVisible.value = true;
+    ruleForm.corpnPhone = "";
+    ruleForm.adminName = "";
+    ruleForm.corpnName = "";
+    ruleForm.level = 1;
+    ruleForm.remake = "";
+    ruleForm.password = "";
+    ruleForm.againPass = "";
+    ruleForm.reamark = "";
+};
+// 取消添加员工
+const cancelAdd = () => {
+    addDialogVisible.value = false;
+    ruleFormRef.value.resetFields();
+};
+//编辑按钮
+const edit = (row) => {
+    dialongTitle.value = "编辑信息";
+    addDialogVisible.value = true;
+    ruleForm.adminName = row.adminName;
+    ruleForm.corpnName = row.corpnName;
+    ruleForm.level = Number(row.level);
+    ruleForm.remark = row.remark;
+    ruleForm.password = row.password;
+    ruleForm.againPass = row.password;
+    ruleForm.corpnPhone = row.corpnPhone;
+    ruleForm.id = row.id;
+};
+// 确认添加员工
+const submitAdd = lodash.debounce(async (formEl) => {
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+        if (valid) {
+            if (dialongTitle.value == "新增账号") {
+                if (ruleForm.password == ruleForm.againPass) {
+                    let data = {
+                        adminName: ruleForm.adminName,
+                        corpnName: ruleForm.corpnName,
+                        level: ruleForm.level,
+                        remark: ruleForm.remark,
+                        password: ruleForm.password,
+                        corpnPhone: ruleForm.corpnPhone,
+                        managerId: sessionStorage.getItem("token"),
+                    };
+                    let res = await axios({
+                        method: "post",
+                        url: api.value + "/mhotel/managerAdmininsertAdminManager.action",
+                        headers: {
+                            // token: sessionStorage.getItem("token"),
+                        },
+                        params: data,
+                    });
+                    console.log(res, "添加账号");
+                    if (res.data.code == 200) {
+                        getList();
+                        ElMessage({
+                            type: "success",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                        addDialogVisible.value = false;
+                        ruleFormRef.value.resetFields();
+                    } else {
+                        ElMessage({
+                            type: "error",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                    }
+                } else {
+                    ElMessage({
+                        type: "error",
+                        showClose: true,
+                        message: "两次密码输入不一致",
+                        center: true,
+                    });
+                }
+            } else {
+                if (ruleForm.password == ruleForm.againPass) {
+                    let data = {
+                        adminName: ruleForm.adminName,
+                        corpnName: ruleForm.corpnName,
+                        level: ruleForm.level,
+                        remark: ruleForm.remark,
+                        password: ruleForm.password,
+                        corpnPhone: ruleForm.corpnPhone,
+                        id: ruleForm.id,
+                    };
+                    let res = await axios({
+                        method: "post",
+                        url: api.value + "/mhotel/managerAdminupdateAdminManager.action",
+                        headers: {
+                            // token: sessionStorage.getItem("token"),
+                            // user_head: sessionStorage.getItem("userhead"),
+                        },
+                        params: data,
+                    });
+                    // console.log(res, "修改账号");
+                    if (res.data.code == 200) {
+                        getList();
+                        ElMessage({
+                            type: "success",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                        addDialogVisible.value = false;
+                        ruleFormRef.value.resetFields();
+                    } else {
+                        ElMessage({
+                            type: "error",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                    }
+                } else {
+                    ElMessage({
+                        type: "error",
+                        showClose: true,
+                        message: "两次密码输入不一致",
+                        center: true,
+                    });
+                }
+            }
+        } else {
+            console.log("error submit!", fields);
+        }
+    });
+}, 1000);
+
+//删除按钮
+const del = async (row) => {
+    // console.log(row);
+    let data = {
+        id: row.id,
+    };
+    let res = await axios({
+        method: "post",
+        url: api.value + "/mhotel/managerAdmindelAdmin.action",
+        headers: {
+            // token: sessionStorage.getItem("token"),
+            // user_head: sessionStorage.getItem("userhead"),
+        },
+        params: data,
+    });
+    if (res.data.code == 200) {
+        if (tableData.list.length == 1 && currentPage.value != 1) {
+            currentPage.value = currentPage.value - 1;
+        }
+        getList();
+        ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    } else {
+        ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    }
+    // console.log(res);
+};
+// 取消删除
+const cancelEvent = () => {
+    ElMessage({
+        type: "info",
+        showClose: true,
+        message: "取消删除",
+        center: true,
+    });
+};
+// 重置密码
+const reset = async (row) => {
+    // console.log(row);
+    let data = {
+        id: row.id,
+    };
+    let res = await axios({
+        method: "post",
+        url: api.value + "/mhotel/managerAdminremovePwd.action",
+        headers: {
+            // token: sessionStorage.getItem("token"),
+            // user_head: sessionStorage.getItem("userhead"),
+        },
+        params: data,
+    });
+    if (res.data.code == 200) {
+        getList();
+        ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    } else {
+        ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    }
+};
+
+// 多选框功能
+// const handleSelectionChange = (val) => {
+//   console.log(val);
+//   selectData.list = val;
+// };
+
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+    if (rowIndex % 2 === 0) {
+        return "even";
+    } else if (rowIndex % 2 !== 0) {
+        return "odd";
+    }
+    return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+    // console.log(value);
+    currentPage.value = value;
+    getList();
+};
+
+onBeforeMount(() => {
+    api.value = store.state.user.api;
+    getList();
+});
+onUnmounted(() => {
+    // document.removeEventListener("keyup", Enters);
+});
+</script>
+  
+<style scoped lang="scss">
+.content-box {
+    width: 97.5%;
+    height: 89%;
+    margin: 20px auto;
+    background-color: #fff;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+    .left {
+        // width: calc(100wh - 40px);
+        display: flex;
+        align-items: center;
+        height: 60px;
+        margin: 0 30px;
+        border-bottom: 1px solid #ccc;
+        color: #000;
+        font-size: 18px;
+        font-weight: 600;
+
+        .camera {
+            margin-right: 15px;
+            color: #4392f7;
+        }
+    }
+
+    .middle {
+        width: 96%;
+        margin: 0 auto;
+
+        color: #000;
+
+        // border-bottom: 1px solid rgb(231, 231, 231);
+        .filter {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            margin: 10px 0 0 0;
+
+            .search {
+                margin-left: 0 !important;
+                color: #fff;
+            }
+
+            .condition {
+                display: flex;
+                align-items: center;
+                margin: 10px 30px 10px 0;
+
+                :deep(.el-input .el-input__inner) {
+                    font-size: 14px;
+                }
+
+                span {
+                    margin: 0 10px 0 0;
+                }
+            }
+        }
+
+        .gongneng {
+            margin: 10px 0;
+
+            .el-button {
+                color: #fff;
+            }
+        }
+
+        :deep(.cont) {
+            width: 60%;
+            margin: 20px auto;
+        }
+
+        :deep(.download) {
+            display: flex;
+            align-items: center;
+            margin: 10px;
+        }
+
+        :deep(.download span) {
+            font-size: 16px;
+            margin-left: 20px;
+        }
+
+        :deep(.cont .el-button) {
+            margin-left: 60px;
+            margin-bottom: 30px;
+        }
+
+        :deep(.cont .accomplish) {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+
+        :deep(.cont .accomplish .el-button) {
+            width: 50%;
+            margin: 0;
+        }
+    }
+
+    .footer {
+        width: 96%;
+        height: 550px;
+        margin: 10px auto 10px;
+
+        .el-table--fit {
+            height: 100%;
+
+            :deep(.el-table__header-wrapper) {
+                background-color: #000;
+                font-size: 15px;
+                color: #000;
+
+                .cell {
+                    color: #000;
+                }
+            }
+
+            :deep(.el-table__row) {
+                height: 50px;
+                font-size: 15px;
+                color: #000;
+            }
+
+            :deep(.el-table__row td) {
+                padding: 0;
+                border: 0;
+            }
+
+            .el-button--primary {
+                margin-left: 5px;
+            }
+
+            :deep(.el-table__body .even) {
+                background-color: #fff;
+            }
+
+            :deep(.el-table__body .odd) {
+                background-color: rgba(240, 243, 247, 1);
+            }
+
+            :deep(.options) {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .reset {
+                    color: rgba(9, 101, 98, 1);
+                    cursor: pointer;
+                }
+
+                .look {
+                    margin: 0 15px;
+                    color: rgba(30, 125, 251, 1);
+                    cursor: pointer;
+                }
+
+                .del {
+                    color: rgba(212, 48, 48, 1);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        // 添加员工弹窗样式
+        :deep(.addStaff) {
+            //   height: 420px;
+            border-radius: 11px;
+
+            .el-dialog__header {
+                border-radius: 11px 11px 0 0;
+                background: rgba(237, 241, 245, 1);
+                font-weight: 600;
+                margin: 0;
+
+                .el-dialog__headerbtn {
+                    outline: none;
+                }
+            }
+
+            .el-dialog__body {
+                padding: 30px 20px 10px 20px;
+
+                .el-input {
+                    width: 200px;
+
+                    .el-input__suffix-inner {
+                        color: rgba(61, 81, 232, 1);
+                    }
+                }
+
+                .options {
+                    margin: 10px 20px 20px 0;
+                    width: 100%;
+
+                    .el-form-item__content {
+                        display: flex;
+                        flex-direction: row-reverse;
+                    }
+
+                    .queding {
+                        color: #fff;
+                        margin-left: 15px;
+                    }
+                }
+            }
+        }
+    }
+
+    .el-pagination {
+        // width: 1600px;
+        width: 96%;
+        margin: 20px auto 18px;
+        justify-content: flex-end;
+
+        :deep(.el-pagination__total) {
+            color: #000;
+        }
+
+        :deep(.el-pagination__goto) {
+            color: #000;
+        }
+
+        :deep(.el-pagination__classifier) {
+            color: #000;
+        }
+
+        :deep(.el-input__wrapper) {
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            box-shadow: none;
+        }
+
+        :deep(.el-pager li) {
+            margin: 0 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+        }
+
+        :deep(.el-pager li.is-active) {
+            background-color: rgba(111, 182, 184, 1);
+        }
+
+        :deep(.btn-prev) {
+            margin-right: 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+        }
+
+        :deep(.btn-next) {
+            margin-left: 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+        }
+    }
+}
+
+.el-input {
+    width: 192px;
+}
+</style>
+  

src/views/old/icCard/icCard.vue

@@ -0,0 +1,845 @@
+<template>
+    <div class="content-box">
+        <div class="left">
+            <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+            <span class="cameratxt">IC卡管理</span>
+        </div>
+        <div class="middle">
+            <div class="filter">
+                <div class="condition">
+                    <span>关键字 : </span>
+                    <el-input clearable v-model="searchInput.adminName" @clear="searchBtn" class="w-50 m-2"
+                        placeholder="请输入用户名" style="width: 150px" />
+                </div>
+
+                <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
+                    @click="searchBtn"><el-icon>
+                        <Search />
+                    </el-icon> <span>查询</span></el-button>
+            </div>
+            <!-- 按钮列表 -->
+            <div class="gongneng">
+                <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"><el-icon>
+                        <CirclePlus />
+                    </el-icon><span>新增账号</span></el-button>
+            </div>
+        </div>
+        <div class="footer" v-loading="loading">
+            <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
+                style="width: 100%" :header-cell-style="{
+                    background: 'rgba(240, 243, 247, 1)',
+                    height: '50px',
+                    border: 0,
+                }">
+                <!-- <el-table-column align="center" type="selection" width="80" /> -->
+                <el-table-column width="150" align="center" label="序号" type="index" index="1" />
+                <el-table-column align="center" prop="corpnPhone" label="手机" />
+                <el-table-column align="center" prop="adminName" label="用户名" />
+                <el-table-column align="center" prop="corpnName" label="姓名" />
+                <el-table-column align="center" label="角色">
+                    <template #default="{ row }">
+                        {{ row.level == 1 ? "管理员" : "超级管理员" }}
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="remark" label="备注" />
+
+                <el-table-column align="center" label="操作" width="220">
+                    <template #default="scope">
+                        <div class="options">
+                            <div class="reset" @click="reset(scope.row)">密码重置</div>
+                            <div class="look" @click="edit(scope.row)">修改</div>
+                            <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
+                                icon-color="#f89626" title="是否删除此账号?" @confirm="del(scope.row)" @cancel="cancelEvent">
+                                <template #reference>
+                                    <div class="del">删除</div>
+                                </template>
+                            </el-popconfirm>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!-- 添加车辆弹窗 -->
+            <el-dialog class="addStaff" v-model="addDialogVisible" :close-on-click-modal="false"
+                :close-on-press-escape="false" :title="dialongTitle" align-center width="609" :before-close="cancelAdd">
+                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
+                    :size="formSize" label-position="left" status-icon>
+                    <el-form-item label="用户名 :" prop="adminName">
+                        <el-input v-model="ruleForm.adminName" placeholder="请输入用户名" clearable />
+                    </el-form-item>
+                    <el-form-item label="姓名 :" prop="corpnName">
+                        <el-input v-model="ruleForm.corpnName" placeholder="请输入姓名" clearable />
+                    </el-form-item>
+                    <el-form-item label="手机号码 :" prop="corpnPhone">
+                        <el-input v-model="ruleForm.corpnPhone" placeholder="请输入手机号码" clearable />
+                    </el-form-item>
+                    <el-form-item label="密码 :" prop="password">
+                        <el-input v-model="ruleForm.password" placeholder="请输入密码" clearable />
+                    </el-form-item>
+                    <el-form-item label="确认密码 :" prop="againPass">
+                        <el-input v-model="ruleForm.againPass" placeholder="请再一次输入密码" clearable />
+                    </el-form-item>
+                    <el-form-item label="角色 :" prop="level">
+                        <el-radio-group v-model="ruleForm.level">
+                            <el-radio :label="1" v-if="ruleForm.level == 1">管理员</el-radio>
+                            <el-radio :label="2" v-if="ruleForm.level == 2">超级管理员</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="简介 :" prop="remark">
+                        <el-input v-model="ruleForm.remark" :rows="3" type="textarea" placeholder="请输入民宿简介信息" />
+                    </el-form-item>
+
+                    <el-form-item class="options">
+                        <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary"
+                            @click="submitAdd(ruleFormRef)">
+                            确定
+                        </el-button>
+                        <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-dialog>
+        </div>
+
+        <!-- 分页组件 -->
+        <el-pagination background :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+    </div>
+</template>
+  
+<script setup>
+import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import { dayjs } from "element-plus";
+import lodash, { reduce } from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+    list: [
+        // {
+        //   phone: 1234,
+        //   adminName: "admin",
+        //   userName: "张三",
+        //   level: 1,
+        //   remark: "测试",
+        // },
+        // {
+        //   phone: 1234,
+        //   adminName: "test",
+        //   userName: "李四",
+        //   level: 1,
+        //   remark: "测试11",
+        // },
+        // {
+        //   phone: 1234,
+        //   adminName: "admin1",
+        //   userName: "张三",
+        //   level: 1,
+        //   remark: "测试",
+        // },
+        // {
+        //   phone: 1234,
+        //   adminName: "admin2",
+        //   userName: "张三",
+        //   level: 1,
+        //   remark: "测试",
+        // },
+    ],
+});
+const activeIndex = ref(); // 默认跳转路由
+const dialongTitle = ref("新增账号"); // 弹窗标题
+
+const searchInput = reactive({
+    adminName: "",
+}); // 搜索按钮数据
+5;
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(); // 当前总数
+const selectData = reactive({
+    list: [],
+}); // 多选框选择的数据
+const api = ref("");
+const addDialogVisible = ref(false); // 控制添加员工弹窗
+
+// 表单数据
+const formSize = ref("default");
+const ruleFormRef = ref();
+const ruleForm = reactive({
+    corpnPhone: "",
+    adminName: "",
+    corpnName: "",
+    level: 1,
+    remark: "",
+    password: "",
+    againPass: "",
+    id: "",
+});
+var checkUserName = (rule, value, callback) => {
+    if (!value) {
+        return callback(new Error("请输入用户名）"));
+    }
+
+    var reg = /^[a-zA-Z0-9]{6,16}$/;
+    if (!reg.test(value)) {
+        callback(new Error("必须为6-16个数字或字母！"));
+    } else {
+        callback();
+    }
+};
+var checkFullName = (rule, value, callback) => {
+    if (!value) {
+        return callback(new Error("请输入姓名"));
+    }
+
+    var reg = /^[\u4e00-\u9fa5]{2,6}$/;
+    if (!reg.test(value)) {
+        callback(new Error("必须为2-6个汉字！"));
+    } else {
+        callback();
+    }
+};
+var checkPhone = (rule, value, callback) => {
+    if (!value) {
+        return callback(new Error("请输入手机号"));
+    }
+    setTimeout(() => {
+        var reg = /^1[3456789]\d{9}$/;
+        if (!reg.test(value)) {
+            callback(new Error("手机号格式不对"));
+        } else {
+            callback();
+        }
+    }, 100);
+};
+// 表单验证
+const rules = reactive({
+    corpnName: [
+        { required: true, message: "姓名不能为空", trigger: "blur" },
+        { validator: checkFullName, trigger: "blur" },
+    ],
+    adminName: [
+        { required: true, message: "用户名不能为空", trigger: "blur" },
+        { validator: checkUserName, trigger: "blur" },
+    ],
+    // ^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$
+    password: [
+        {
+            required: true,
+            message: "密码不能为空",
+            trigger: "blur",
+        },
+        {
+            min: 8,
+            max: 20,
+            pattern:
+                /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+            message: "请输入8-20位正确密码（大小写字母·字符·数字）",
+            trigger: "blur",
+        },
+    ],
+    againPass: [
+        {
+            required: true,
+            message: "确认密码不能为空",
+            trigger: "blur",
+        },
+        {
+            min: 8,
+            max: 20,
+            pattern:
+                /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+            message: "请输入8-20位正确密码（大小写字母·字符·数字）",
+            trigger: "blur",
+        },
+    ],
+    level: [
+        {
+            required: true,
+            message: "角色不能为空",
+            trigger: "blur",
+        },
+    ],
+    remark: [
+        {
+            required: true,
+            message: "备注不能为空",
+            trigger: "blur",
+        },
+    ],
+    corpnPhone: [
+        {
+            required: true,
+            message: "电话号码不能为空",
+            trigger: "blur",
+        },
+        { validator: checkPhone, trigger: "blur" },
+    ],
+
+    // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
+});
+// 获取账户列表
+const getList = async () => {
+    // if (searchInput.account) {
+    //   data.adminName = searchInput.adminName;
+    // }
+    loading.value = true;
+    let data = {
+        page: currentPage.value, // 当前页
+        rows: pageSize.value, // 一页数据条数
+        adminName: searchInput.adminName, //用户名
+        managerId: sessionStorage.getItem("token"),
+    };
+    let res = await axios({
+        method: "get",
+        url: api.value + "/mhotel/managerAdminqueryPage.action",
+        headers: {
+            // token: sessionStorage.getItem("token"),
+        },
+        params: data,
+    });
+    console.log(res, "账号信息");
+    if (res.data.code == 200) {
+        tableData.list = res.data.data.pageList;
+        total.value = res.data.data.total;
+        loading.value = false;
+        // ElMessage({
+        //   type: "success",
+        //   showClose: true,
+        //   message: res.data.message,
+        //   center: true,
+        // });
+    } else {
+        loading.value = false;
+        ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+    getList();
+}, 300);
+
+// 添加员工
+const addlist = () => {
+    dialongTitle.value = "新增账号";
+    addDialogVisible.value = true;
+    ruleForm.corpnPhone = "";
+    ruleForm.adminName = "";
+    ruleForm.corpnName = "";
+    ruleForm.level = 1;
+    ruleForm.remake = "";
+    ruleForm.password = "";
+    ruleForm.againPass = "";
+    ruleForm.reamark = "";
+};
+// 取消添加员工
+const cancelAdd = () => {
+    addDialogVisible.value = false;
+    ruleFormRef.value.resetFields();
+};
+//编辑按钮
+const edit = (row) => {
+    dialongTitle.value = "编辑信息";
+    addDialogVisible.value = true;
+    ruleForm.adminName = row.adminName;
+    ruleForm.corpnName = row.corpnName;
+    ruleForm.level = Number(row.level);
+    ruleForm.remark = row.remark;
+    ruleForm.password = row.password;
+    ruleForm.againPass = row.password;
+    ruleForm.corpnPhone = row.corpnPhone;
+    ruleForm.id = row.id;
+};
+// 确认添加员工
+const submitAdd = lodash.debounce(async (formEl) => {
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+        if (valid) {
+            if (dialongTitle.value == "新增账号") {
+                if (ruleForm.password == ruleForm.againPass) {
+                    let data = {
+                        adminName: ruleForm.adminName,
+                        corpnName: ruleForm.corpnName,
+                        level: ruleForm.level,
+                        remark: ruleForm.remark,
+                        password: ruleForm.password,
+                        corpnPhone: ruleForm.corpnPhone,
+                        managerId: sessionStorage.getItem("token"),
+                    };
+                    let res = await axios({
+                        method: "post",
+                        url: api.value + "/mhotel/managerAdmininsertAdminManager.action",
+                        headers: {
+                            // token: sessionStorage.getItem("token"),
+                        },
+                        params: data,
+                    });
+                    console.log(res, "添加账号");
+                    if (res.data.code == 200) {
+                        getList();
+                        ElMessage({
+                            type: "success",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                        addDialogVisible.value = false;
+                        ruleFormRef.value.resetFields();
+                    } else {
+                        ElMessage({
+                            type: "error",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                    }
+                } else {
+                    ElMessage({
+                        type: "error",
+                        showClose: true,
+                        message: "两次密码输入不一致",
+                        center: true,
+                    });
+                }
+            } else {
+                if (ruleForm.password == ruleForm.againPass) {
+                    let data = {
+                        adminName: ruleForm.adminName,
+                        corpnName: ruleForm.corpnName,
+                        level: ruleForm.level,
+                        remark: ruleForm.remark,
+                        password: ruleForm.password,
+                        corpnPhone: ruleForm.corpnPhone,
+                        id: ruleForm.id,
+                    };
+                    let res = await axios({
+                        method: "post",
+                        url: api.value + "/mhotel/managerAdminupdateAdminManager.action",
+                        headers: {
+                            // token: sessionStorage.getItem("token"),
+                            // user_head: sessionStorage.getItem("userhead"),
+                        },
+                        params: data,
+                    });
+                    // console.log(res, "修改账号");
+                    if (res.data.code == 200) {
+                        getList();
+                        ElMessage({
+                            type: "success",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                        addDialogVisible.value = false;
+                        ruleFormRef.value.resetFields();
+                    } else {
+                        ElMessage({
+                            type: "error",
+                            showClose: true,
+                            message: res.data.message,
+                            center: true,
+                        });
+                    }
+                } else {
+                    ElMessage({
+                        type: "error",
+                        showClose: true,
+                        message: "两次密码输入不一致",
+                        center: true,
+                    });
+                }
+            }
+        } else {
+            console.log("error submit!", fields);
+        }
+    });
+}, 1000);
+
+//删除按钮
+const del = async (row) => {
+    // console.log(row);
+    let data = {
+        id: row.id,
+    };
+    let res = await axios({
+        method: "post",
+        url: api.value + "/mhotel/managerAdmindelAdmin.action",
+        headers: {
+            // token: sessionStorage.getItem("token"),
+            // user_head: sessionStorage.getItem("userhead"),
+        },
+        params: data,
+    });
+    if (res.data.code == 200) {
+        if (tableData.list.length == 1 && currentPage.value != 1) {
+            currentPage.value = currentPage.value - 1;
+        }
+        getList();
+        ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    } else {
+        ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    }
+    // console.log(res);
+};
+// 取消删除
+const cancelEvent = () => {
+    ElMessage({
+        type: "info",
+        showClose: true,
+        message: "取消删除",
+        center: true,
+    });
+};
+// 重置密码
+const reset = async (row) => {
+    // console.log(row);
+    let data = {
+        id: row.id,
+    };
+    let res = await axios({
+        method: "post",
+        url: api.value + "/mhotel/managerAdminremovePwd.action",
+        headers: {
+            // token: sessionStorage.getItem("token"),
+            // user_head: sessionStorage.getItem("userhead"),
+        },
+        params: data,
+    });
+    if (res.data.code == 200) {
+        getList();
+        ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    } else {
+        ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+        });
+    }
+};
+
+// 多选框功能
+// const handleSelectionChange = (val) => {
+//   console.log(val);
+//   selectData.list = val;
+// };
+
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+    if (rowIndex % 2 === 0) {
+        return "even";
+    } else if (rowIndex % 2 !== 0) {
+        return "odd";
+    }
+    return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+    // console.log(value);
+    currentPage.value = value;
+    getList();
+};
+
+onBeforeMount(() => {
+    api.value = store.state.user.api;
+    getList();
+});
+onUnmounted(() => {
+    // document.removeEventListener("keyup", Enters);
+});
+</script>
+  
+<style scoped lang="scss">
+.content-box {
+    width: 97.5%;
+    height: 89%;
+    margin: 20px auto;
+    background-color: #fff;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+    .left {
+        // width: calc(100wh - 40px);
+        display: flex;
+        align-items: center;
+        height: 60px;
+        margin: 0 30px;
+        border-bottom: 1px solid #ccc;
+        color: #000;
+        font-size: 18px;
+        font-weight: 600;
+
+        .camera {
+            margin-right: 15px;
+            color: #4392f7;
+        }
+    }
+
+    .middle {
+        width: 96%;
+        margin: 0 auto;
+
+        color: #000;
+
+        // border-bottom: 1px solid rgb(231, 231, 231);
+        .filter {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            margin: 10px 0 0 0;
+
+            .search {
+                margin-left: 0 !important;
+                color: #fff;
+            }
+
+            .condition {
+                display: flex;
+                align-items: center;
+                margin: 10px 30px 10px 0;
+
+                :deep(.el-input .el-input__inner) {
+                    font-size: 14px;
+                }
+
+                span {
+                    margin: 0 10px 0 0;
+                }
+            }
+        }
+
+        .gongneng {
+            margin: 10px 0;
+
+            .el-button {
+                color: #fff;
+            }
+        }
+
+        :deep(.cont) {
+            width: 60%;
+            margin: 20px auto;
+        }
+
+        :deep(.download) {
+            display: flex;
+            align-items: center;
+            margin: 10px;
+        }
+
+        :deep(.download span) {
+            font-size: 16px;
+            margin-left: 20px;
+        }
+
+        :deep(.cont .el-button) {
+            margin-left: 60px;
+            margin-bottom: 30px;
+        }
+
+        :deep(.cont .accomplish) {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+
+        :deep(.cont .accomplish .el-button) {
+            width: 50%;
+            margin: 0;
+        }
+    }
+
+    .footer {
+        width: 96%;
+        height: 550px;
+        margin: 10px auto 10px;
+
+        .el-table--fit {
+            height: 100%;
+
+            :deep(.el-table__header-wrapper) {
+                background-color: #000;
+                font-size: 15px;
+                color: #000;
+
+                .cell {
+                    color: #000;
+                }
+            }
+
+            :deep(.el-table__row) {
+                height: 50px;
+                font-size: 15px;
+                color: #000;
+            }
+
+            :deep(.el-table__row td) {
+                padding: 0;
+                border: 0;
+            }
+
+            .el-button--primary {
+                margin-left: 5px;
+            }
+
+            :deep(.el-table__body .even) {
+                background-color: #fff;
+            }
+
+            :deep(.el-table__body .odd) {
+                background-color: rgba(240, 243, 247, 1);
+            }
+
+            :deep(.options) {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .reset {
+                    color: rgba(9, 101, 98, 1);
+                    cursor: pointer;
+                }
+
+                .look {
+                    margin: 0 15px;
+                    color: rgba(30, 125, 251, 1);
+                    cursor: pointer;
+                }
+
+                .del {
+                    color: rgba(212, 48, 48, 1);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        // 添加员工弹窗样式
+        :deep(.addStaff) {
+            //   height: 420px;
+            border-radius: 11px;
+
+            .el-dialog__header {
+                border-radius: 11px 11px 0 0;
+                background: rgba(237, 241, 245, 1);
+                font-weight: 600;
+                margin: 0;
+
+                .el-dialog__headerbtn {
+                    outline: none;
+                }
+            }
+
+            .el-dialog__body {
+                padding: 30px 20px 10px 20px;
+
+                .el-input {
+                    width: 200px;
+
+                    .el-input__suffix-inner {
+                        color: rgba(61, 81, 232, 1);
+                    }
+                }
+
+                .options {
+                    margin: 10px 20px 20px 0;
+                    width: 100%;
+
+                    .el-form-item__content {
+                        display: flex;
+                        flex-direction: row-reverse;
+                    }
+
+                    .queding {
+                        color: #fff;
+                        margin-left: 15px;
+                    }
+                }
+            }
+        }
+    }
+
+    .el-pagination {
+        // width: 1600px;
+        width: 96%;
+        margin: 20px auto 18px;
+        justify-content: flex-end;
+
+        :deep(.el-pagination__total) {
+            color: #000;
+        }
+
+        :deep(.el-pagination__goto) {
+            color: #000;
+        }
+
+        :deep(.el-pagination__classifier) {
+            color: #000;
+        }
+
+        :deep(.el-input__wrapper) {
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            box-shadow: none;
+        }
+
+        :deep(.el-pager li) {
+            margin: 0 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+        }
+
+        :deep(.el-pager li.is-active) {
+            background-color: rgba(111, 182, 184, 1);
+        }
+
+        :deep(.btn-prev) {
+            margin-right: 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+        }
+
+        :deep(.btn-next) {
+            margin-left: 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+        }
+    }
+}
+
+.el-input {
+    width: 192px;
+}
+</style>
+  

src/views/old/meter/meter.vue

@@ -0,0 +1,897 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">水电表管理</span>
+    </div>
+    <div>
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>关键字&nbsp;&nbsp;</span>
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入关键字"
+            />
+          </div>
+          <div class="condition">
+            <span>创建时间&nbsp;&nbsp;</span>
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+            />
+          </div>
+          <el-button
+            color="rgba(0, 97, 255, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
+              <Search />
+            </el-icon>
+            <span>查询</span></el-button
+          >
+        </div>
+        <!-- 按钮列表 -->
+        <div class="gongneng">
+          <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="addClick"
+            ><span>添加</span></el-button
+          >
+          <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+            ><span>导出</span></el-button
+          >
+          <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+            ><span>导入</span></el-button
+          >
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <el-table-column
+            width="150"
+            align="center "
+            type="index"
+            label="序号"
+          />
+          <el-table-column align="center" prop="hName" label="房型" />
+          <el-table-column align="center" prop="price" label="房费(元)" />
+          <el-table-column align="center" prop="number" label="数量" />
+
+          <el-table-column align="center" label="操作" width="200">
+            <template #default="scope">
+              <div class="edit">
+                <div class="look" @click="editClick(scope.row)">编辑</div>
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此房型?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">删除</div>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 编辑按钮 -->
+      <el-dialog
+        class="editDialog"
+        v-model="editVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="titleDialog"
+        align-center
+        width="550"
+        :before-close="cancelEdit"
+      >
+        <el-form
+          ref="editRef"
+          :model="editRuleForm"
+          :rules="editRules"
+          label-width="90px"
+          class="demo-ruleForm"
+          :size="formSize"
+          label-position="left"
+          status-icon
+        >
+          <el-form-item label="水电编码 :" prop="SD_encoding">
+            <el-input
+              v-model="editRuleForm.SD_encoding"
+              placeholder="请输入水电编码"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="电表编码 :" prop="DB_encoding">
+            <el-input
+              v-model="editRuleForm.DB_encoding"
+              placeholder="请输入电表编码"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="房间号 :" prop="roomNum">
+            <!-- <el-tree
+              :data="roomNumData"
+              :props="{
+                label: 'label',
+                children: 'children',
+                value: 'value',
+                disabled: 'disabled',
+              }"
+              node-key="id"
+              show-checkbox
+              ref="roomNumRef"
+              @node-click="roomNumClick"
+              @check-change="handleCheckChange"
+            /> -->
+            <el-cascader
+              v-model="editRuleForm.roomNum"
+              :options="roomNumData"
+              :show-all-levels="false"
+            />
+          </el-form-item>
+          <el-form-item class="options">
+            <el-button
+              color="rgba(41, 109, 227, 1)"
+              class="queding"
+              type="primary"
+              @click="confirmEdit(editRef)"
+            >
+              确定
+            </el-button>
+            <el-button @click="cancelEdit(editRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
+      </div>
+    </div>
+    <div class="bgImg" v-if="bgImg">
+      <el-carousel
+        @click="bgImg = false"
+        ref="bgImgs"
+        indicator-position
+        arrow="always"
+        :autoplay="false"
+        trigger
+      >
+        <el-carousel-item v-for="item in bgImgList" :key="item.id">
+          <img :src="item.url" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import vidiconsApi from "@/api/vidicons.js";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const api = ref("");
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [
+    // {
+    //   userName: "双人房",
+    //   userPhone: 150,
+    //   teamName: 12,
+    // },
+    // {
+    //   userName: "双人房",
+    //   userPhone: 150,
+    //   teamName: 12,
+    // },
+    // {
+    //   userName: "双人房",
+    //   userPhone: 150,
+    //   teamName: 12,
+    // },
+    // {
+    //   userName: "双人房",
+    //   userPhone: 150,
+    //   teamName: 12,
+    // },
+  ],
+});
+
+const searchInput = reactive({
+  keyWord: "",
+  createTime: "",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(); // 当前总数
+
+// 编辑功能
+const titleDialog = ref("");
+const editVisible = ref(false);
+const editRef = ref();
+const editRuleForm = reactive({
+  SD_encoding: "",
+  DB_encoding: "",
+  roomNum: "",
+  id: "",
+});
+// 树形结构配置
+const roomNumRef = ref();
+const roomNumData = [
+  {
+    value: 1,
+    label: "Level one 1",
+    children: [
+      {
+        value: 11,
+        label: "Level two 1-1",
+      },
+      {
+        value: 12,
+        label: "Level two 1-2",
+      },
+    ],
+  },
+  {
+    value: 2,
+    label: "Level one 2",
+    children: [
+      {
+        value: 21,
+        label: "Level two 2-1",
+      },
+      {
+        value: 22,
+        label: "Level two 2-2",
+      },
+    ],
+  },
+];
+// 表单验证
+const editRules = reactive({
+  SD_encoding: [
+    { required: true, message: "水电编码不能为空", trigger: "blur" },
+  ],
+  DB_encoding: [
+    {
+      required: true,
+      message: "电表编码不能为空",
+      trigger: "blur",
+    },
+  ],
+  roomNum: [
+    {
+      required: true,
+      message: "房间号不能为空",
+      trigger: "blur",
+    },
+  ],
+});
+
+// 查看房型列表
+const getList = async () => {
+  loading.value = true;
+  let data = {
+    page: currentPage.value,
+    rows: pageSize.value,
+    hName: searchInput.keyWord, // 房型名称
+    managerId: sessionStorage.getItem("token"),
+  };
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/housequeryPage.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(res, "房型管理");
+  if (res.data.code == 200) {
+    loading.value = false;
+    tableData.list = res.data.data.pageList;
+    total.value = res.data.data.total;
+    // ElMessage({
+    //   type: "success",
+    //   showClose: true,
+    //   message: res.data.message,
+    //   center: true,
+    // });
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+// 添加按钮 （-------------------------------------------）
+const addClick = async () => {
+  titleDialog.value = "新增";
+  editVisible.value = true;
+  //   let data = {
+  //     linkId: row.id,
+  //   };
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
+  //     headers: {},
+  //     params: data,
+  //   });
+  //   console.log(res, "编辑中查找图片");
+  //   if (res.data.code == 200) {
+  //     // res.data.data.fileInfoList.forEach((item) => {
+  //     //   item.uid = item.id;
+  //     // });
+  //     // fileList.list = res.data.data.fileInfoList;
+  //     // ruleForm.fileListJson = fileList.list;
+  //     res.data.data.forEach((item) => {
+  //       item.uid = item.id;
+  //     });
+  //     fileList.list = res.data.data;
+  //     ruleForm.fileListJson = fileList.list;
+  //     // ElMessage({
+  //     //   type: "success",
+  //     //   showClose: true,
+  //     //   message: res.data.message,
+  //     //   center: true,
+  //     // });
+  //   } else {
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
+};
+
+//编辑按钮  （-------------------------------------------）
+const editClick = async () => {
+  titleDialog.value = "编辑";
+  editVisible.value = true;
+  //   let data = {
+  //     linkId: row.id,
+  //   };
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
+  //     headers: {},
+  //     params: data,
+  //   });
+  //   console.log(res, "编辑中查找图片");
+  //   if (res.data.code == 200) {
+  //     // res.data.data.fileInfoList.forEach((item) => {
+  //     //   item.uid = item.id;
+  //     // });
+  //     // fileList.list = res.data.data.fileInfoList;
+  //     // ruleForm.fileListJson = fileList.list;
+  //     res.data.data.forEach((item) => {
+  //       item.uid = item.id;
+  //     });
+  //     fileList.list = res.data.data;
+  //     ruleForm.fileListJson = fileList.list;
+  //     // ElMessage({
+  //     //   type: "success",
+  //     //   showClose: true,
+  //     //   message: res.data.message,
+  //     //   center: true,
+  //     // });
+  //   } else {
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
+};
+
+const cancelEdit = () => {
+  editVisible.value = false;
+  editRuleForm.roomNum = "";
+};
+// // 树形结构 复选框被触发
+// const handleCheckChange = (data, checked, indeterminate) => {
+//   //   console.log(data, checked, indeterminate);
+//   if (data.list) {
+//     // console.log(data.list);
+//   } else {
+//     if (checked) {
+//       roomNumRef.value.setCheckedKeys([data.id]);
+//     }
+//     let keys = roomNumRef.value.getCheckedKeys();
+//     console.log(keys);
+//     editRuleForm.roomNum = keys;
+//   }
+// };
+// // 树形结构 被点击时触发
+// const roomNumClick = (data, node, component) => {
+//   //  * @description: node - click 节点被点击时的回调
+//   //  * @param {*} data 该节点所对应的对象
+//   //  * @param {*} node 节点对应的 Node
+//   //  * @param {*} component 节点组件本身
+//   console.log("子组件触发 node-click 事件", data, node, component);
+//   //   buildIdsRef.value.setCheckedKeys(item.build);
+// };
+
+// 确定编辑
+const confirmEdit = (formEl) => {
+  if (!formEl) return;
+  formEl.validate(async (valid, fields) => {
+    if (valid) {
+    }
+  });
+};
+
+//删除按钮
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/housedelHouser.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+  // console.log(res);
+};
+
+// 多选框功能
+const handleSelectionChange = (val) => {
+  console.log(val);
+  selectData.list = val;
+};
+//导出功能
+// const importExcel = async () => {
+//   if (searchInput.createTime == null) {
+//     searchInput.createTime = "";
+//   }
+//   let data = new FormData();
+//   data.set("car_number", searchInput.carnumber);
+//   data.set("create_time", searchInput.createTime);
+//   let res = await axios({
+//     method: "post",
+//     url: api.value + "/carBook/cinfotoExcel.action",
+//     headers: {
+//       token: sessionStorage.getItem("token"),
+//     },
+//     data: data,
+//   });
+//   // console.log(res, "导出账号");
+//   if (res.data.code == 200) {
+//     // const elt = document.createElement("a");
+//     // elt.setAttribute(
+//     //   "href",
+//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
+//     // );
+//     // elt.setAttribute("download", "file.png");
+//     // elt.style.display = "none";
+//     // document.body.appendChild(elt);
+//     // elt.click();
+//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
+//     console.log("获得地址数据:", downloadPath);
+//     var downloadLink = document.createElement("a");
+//     downloadLink.style.display = "none"; // 使其隐藏
+//     downloadLink.href = downloadPath;
+//     downloadLink.download = "";
+//     downloadLink.click();
+//     document.body.appendChild(downloadLink);
+//     document.body.removeChild(downloadLink);
+//     ElMessage({
+//       type: "success",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   } else {
+//     ElMessage({
+//       type: "error",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   }
+// };
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(async () => {
+  api.value = store.state.user.api;
+  getList();
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  width: 97.5%;
+  height: 89%;
+  margin: 20px auto;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+    height: 60px;
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    font-weight: 600;
+
+    span {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+
+    .is_active {
+      color: rgba(111, 182, 184, 1);
+    }
+  }
+
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 10px 0 0 0;
+
+      .search {
+        color: #fff;
+      }
+
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+
+    .gongneng {
+      margin: 10px 0 20px 0;
+
+      span {
+        color: #fff;
+      }
+      .el-button {
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+
+  .footer {
+    width: 96%;
+    height: 550px;
+    margin: 10px auto 30px;
+
+    .el-table--fit {
+      height: 100%;
+
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 16px;
+
+        tr {
+          color: #000;
+        }
+      }
+
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 16px;
+        color: #000;
+      }
+
+      :deep(.el-table__row):nth-child(2n) {
+        .el-table-fixed-column--right {
+          background-color: rgba(240, 243, 247, 1);
+        }
+      }
+
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+
+      :deep(.edit) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.look) {
+        padding: 0 10px;
+        cursor: pointer;
+        color: rgba(30, 125, 251, 1);
+      }
+
+      .del {
+        padding: 0 10px;
+        color: rgba(212, 48, 48, 1);
+        cursor: pointer;
+      }
+
+      // :deep(.look):hover {
+      //   color: red;
+      // }
+      // :deep(.del):hover {
+      //   color: red;
+      // }
+    }
+  }
+  // 编辑按钮
+  :deep(.editDialog) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 20px 10px 20px;
+      .el-form-item__content {
+        width: 200px;
+        .el-tree-node__content {
+          //   border: 1px solid red;
+          .el-checkbox {
+            display: none;
+          }
+        }
+        .el-tree-node__children {
+          .el-checkbox {
+            display: block;
+          }
+        }
+      }
+      .options {
+        margin: 10px 20px 20px 0;
+        width: 100%;
+        .el-form-item__content {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+        .queding {
+          color: #fff;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        // background-color: rgba(0, 97, 255, 0.8);
+        border: 1px solid rgba(0, 97, 255, 1);
+        color: rgba(0, 97, 255, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 192px;
+}
+</style>

src/views/safety/safety.vue

@@ -0,0 +1,900 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">校园安全</span>
+    </div>
+    <div>
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              placeholder="请输入关键字"
+            >
+              <template #prefix>
+                <el-icon class="el-input__icon"><search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+          <el-button
+            color="rgba(0, 97, 255, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+          >
+            查询</el-button
+          >
+          <div class="condition">
+            <span>状态 :</span>
+            <el-select
+              v-model="searchInput.status"
+              class="m-2"
+              placeholder="请选择状态"
+            >
+              <el-option label="全部" value="1" />
+              <el-option label="已处理" value="2" />
+              <el-option label="未处理" value="3" />
+            </el-select>
+          </div>
+        </div>
+        <!-- 按钮列表 -->
+        <div class="gongneng">
+          <!-- <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="addClick"
+            plain
+            >新建身份</el-button
+          > -->
+          <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="importExcel"
+            plain
+            >导出</el-button
+          >
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <el-table-column
+            width="100"
+            align="center "
+            type="index"
+            label="序号"
+          />
+          <el-table-column align="center" prop="userName" label="姓名" />
+          <el-table-column align="center" prop="type" label="类型" />
+          <el-table-column align="center" prop="position" label="地点" />
+          <el-table-column align="center" prop="img" label="图片">
+            <template #default="{ row }">
+              <div class="img">
+                <img @click="imgClick(row)" :src="row.img" alt="" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="remark"
+            show-overflow-tooltip
+            width="220"
+            label="备注"
+          />
+          <el-table-column align="center" prop="status" label="状态" />
+          <el-table-column
+            align="center"
+            prop="time"
+            width="200"
+            label="时间"
+          />
+          <el-table-column align="center" label="操作" width="200">
+            <template #default="scope">
+              <div class="edit">
+                <div class="look" @click="editClick(scope.row)">处理</div>
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否确认为误报?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">误报</div>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
+      </div>
+
+      <!-- 编辑按钮 -->
+      <!-- <el-dialog
+        class="editDialog"
+        v-model="editVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="titleDialog"
+        align-center
+        width="600"
+        :before-close="cancelEdit"
+      >
+        <el-form
+          ref="editRef"
+          :model="editRuleForm"
+          :rules="editRules"
+          label-width="90px"
+          class="demo-ruleForm"
+          :size="formSize"
+          label-position="left"
+          status-icon
+        >
+          <el-form-item label="身份 :" prop="userDepartment">
+            <el-input
+              v-model="editRuleForm.userDepartment"
+              placeholder="请输入身份"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="应用管理 :" prop="userName">
+            <el-select
+              v-model="editRuleForm.userName"
+              multiple
+              placeholder="请选择应用管理"
+              style="width: 500px"
+            >
+              <el-option label="学生肖像" value="1" />
+              <el-option label="车辆预约" value="2" />
+              <el-option label="校园打卡" value="3" />
+              <el-option label="校园报修" value="4" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item class="options">
+            <el-button
+              color="rgba(41, 109, 227, 1)"
+              class="queding"
+              type="primary"
+              @click="confirmEdit(editRef)"
+            >
+              确认
+            </el-button>
+            <el-button @click="cancelEdit(editRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog> -->
+    </div>
+    <div class="bgImg" v-if="bgImg">
+      <el-carousel
+        @click="bgImg = false"
+        ref="bgImgs"
+        indicator-position
+        arrow="always"
+        :autoplay="false"
+        trigger
+      >
+        <el-carousel-item>
+          <img :src="showImg" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import vidiconsApi from "@/api/vidicons.js";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const api = ref("");
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [
+    {
+      userName: "张三",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+    {
+      userName: "王卿",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+    {
+      userName: "李明",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+    {
+      userName: "涂涂",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+    {
+      userName: "小红",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+    {
+      userName: "小明",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+    {
+      userName: "例子",
+      type: "越界",
+      position: "教学楼",
+      img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
+      remark: "请规范好学生行为",
+      status: "已处理",
+      time: "2023-12-02 11:05:30",
+    },
+  ],
+});
+
+const searchInput = reactive({
+  keyWord: "",
+  status: "1",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(7);
+const total = ref(7); // 当前总数
+const bgImg = ref(false);
+const showImg = ref();
+
+// 编辑功能
+const titleDialog = ref("");
+const editVisible = ref(false);
+const editRef = ref();
+const editRuleForm = reactive({
+  userDepartment: "", // 用户部门
+  userName: "", // 用户名
+  userRoles: "", // 用户角色
+  schoolCard: "", // 微校卡号
+  idNumber: "", // 身份证号
+  fingerprint: "", // 指纹
+  id: "",
+});
+
+// 表单验证
+const editRules = reactive({
+  userDepartment: [
+    { required: true, message: "身份不能为空", trigger: "blur" },
+  ],
+  userName: [
+    {
+      required: true,
+      message: "应用管理不能为空",
+      trigger: "blur",
+    },
+  ],
+  userRoles: [
+    {
+      required: true,
+      message: "用户角色不能为空",
+      trigger: "blur",
+    },
+  ],
+  schoolCard: [
+    {
+      required: true,
+      message: "微校卡号不能为空",
+      trigger: "blur",
+    },
+  ],
+  idNumber: [
+    {
+      required: true,
+      message: "身份证号不能为空",
+      trigger: "blur",
+    },
+  ],
+  fingerprint: [
+    {
+      required: true,
+      message: "指纹不能为空",
+      trigger: "blur",
+    },
+  ],
+});
+
+// 查看房型列表
+const getList = async () => {
+  //   loading.value = true;
+  //   let data = {
+  //     page: currentPage.value,
+  //     rows: pageSize.value,
+  //     hName: searchInput.keyWord, // 房型名称
+  //     managerId: sessionStorage.getItem("token"),
+  //   };
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/housequeryPage.action",
+  //     headers: {
+  //       // token: sessionStorage.getItem("token"),
+  //       // user_head: sessionStorage.getItem("userhead"),
+  //     },
+  //     params: data,
+  //   });
+  //   console.log(res, "房型管理");
+  //   if (res.data.code == 200) {
+  //     loading.value = false;
+  //     tableData.list = res.data.data.pageList;
+  //     total.value = res.data.data.total;
+  //     // ElMessage({
+  //     //   type: "success",
+  //     //   showClose: true,
+  //     //   message: res.data.message,
+  //     //   center: true,
+  //     // });
+  //   } else {
+  //     loading.value = false;
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+
+//处理按钮  （-------------------------------------------）
+const editClick = async () => {
+  titleDialog.value = "处理";
+  // editVisible.value = true;
+  //   let data = {
+  //     linkId: row.id,
+  //   };
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
+  //     headers: {},
+  //     params: data,
+  //   });
+  //   console.log(res, "编辑中查找图片");
+  //   if (res.data.code == 200) {
+  //     // res.data.data.fileInfoList.forEach((item) => {
+  //     //   item.uid = item.id;
+  //     // });
+  //     // fileList.list = res.data.data.fileInfoList;
+  //     // ruleForm.fileListJson = fileList.list;
+  //     res.data.data.forEach((item) => {
+  //       item.uid = item.id;
+  //     });
+  //     fileList.list = res.data.data;
+  //     ruleForm.fileListJson = fileList.list;
+  //     // ElMessage({
+  //     //   type: "success",
+  //     //   showClose: true,
+  //     //   message: res.data.message,
+  //     //   center: true,
+  //     // });
+  //   } else {
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
+};
+
+// 查看图片
+const imgClick = (row) => {
+  bgImg.value = true;
+  showImg.value = row.img;
+};
+
+//删除按钮
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/housedelHouser.action",
+  //     headers: {
+  //       // token: sessionStorage.getItem("token"),
+  //       // user_head: sessionStorage.getItem("userhead"),
+  //     },
+  //     params: data,
+  //   });
+  //   if (res.data.code == 200) {
+  //     if (tableData.list.length == 1 && currentPage.value != 1) {
+  //       currentPage.value = currentPage.value - 1;
+  //     }
+  //     getList();
+  //     ElMessage({
+  //       type: "success",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   } else {
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
+  // console.log(res);
+};
+
+// 多选框功能
+const handleSelectionChange = (val) => {
+  console.log(val);
+  selectData.list = val;
+};
+//导出功能
+// const importExcel = async () => {
+//   if (searchInput.createTime == null) {
+//     searchInput.createTime = "";
+//   }
+//   let data = new FormData();
+//   data.set("car_number", searchInput.carnumber);
+//   data.set("create_time", searchInput.createTime);
+//   let res = await axios({
+//     method: "post",
+//     url: api.value + "/carBook/cinfotoExcel.action",
+//     headers: {
+//       token: sessionStorage.getItem("token"),
+//     },
+//     data: data,
+//   });
+//   // console.log(res, "导出账号");
+//   if (res.data.code == 200) {
+//     // const elt = document.createElement("a");
+//     // elt.setAttribute(
+//     //   "href",
+//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
+//     // );
+//     // elt.setAttribute("download", "file.png");
+//     // elt.style.display = "none";
+//     // document.body.appendChild(elt);
+//     // elt.click();
+//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
+//     console.log("获得地址数据:", downloadPath);
+//     var downloadLink = document.createElement("a");
+//     downloadLink.style.display = "none"; // 使其隐藏
+//     downloadLink.href = downloadPath;
+//     downloadLink.download = "";
+//     downloadLink.click();
+//     document.body.appendChild(downloadLink);
+//     document.body.removeChild(downloadLink);
+//     ElMessage({
+//       type: "success",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   } else {
+//     ElMessage({
+//       type: "error",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   }
+// };
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(async () => {
+  api.value = store.state.user.api;
+  getList();
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  width: 97.5%;
+  height: 89%;
+  margin: 20px auto;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+    height: 60px;
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    font-weight: 600;
+
+    span {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+
+    .is_active {
+      color: rgba(111, 182, 184, 1);
+    }
+  }
+
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 10px 0 0 0;
+
+      .search {
+        color: #fff;
+        margin: 0 40px 0 0;
+      }
+
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 20px 10px 0;
+
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+
+    .gongneng {
+      margin: 10px 0 20px 0;
+
+      span {
+        color: #fff;
+      }
+      .el-button {
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+
+  .footer {
+    width: 96%;
+    height: 540px;
+    margin: 10px auto 30px;
+
+    .el-table--fit {
+      height: 100%;
+
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 16px;
+
+        tr {
+          color: #000;
+        }
+      }
+
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 16px;
+        color: #000;
+      }
+
+      :deep(.el-table__row):nth-child(2n) {
+        .el-table-fixed-column--right {
+          background-color: rgba(240, 243, 247, 1);
+        }
+      }
+
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+        .img {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 5px 0;
+          img {
+            width: 60px;
+            height: 60px;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+
+      :deep(.edit) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.look) {
+        padding: 0 10px;
+        cursor: pointer;
+        color: rgba(30, 125, 251, 1);
+      }
+
+      .del {
+        padding: 0 10px;
+        color: rgba(212, 48, 48, 1);
+        cursor: pointer;
+      }
+
+      // :deep(.look):hover {
+      //   color: red;
+      // }
+      // :deep(.del):hover {
+      //   color: red;
+      // }
+    }
+  }
+  // 编辑按钮
+  :deep(.editDialog) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 30px 10px 30px;
+      .el-form-item__content {
+        width: 200px;
+        .el-input-group__append {
+          background-color: rgba(222, 234, 252, 1);
+          color: rgba(0, 97, 255, 1);
+          cursor: pointer;
+          user-select: none;
+        }
+      }
+      .options {
+        margin: 50px 20px 20px 0;
+        width: 100%;
+        .el-form-item__content {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+        .queding {
+          color: #fff;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        // background-color: rgba(0, 97, 255, 0.8);
+        border: 1px solid rgba(0, 97, 255, 1);
+        color: rgba(0, 97, 255, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+  .bgImg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99999999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+
+    // border-radius: 50px;
+    :deep(.el-carousel__container) {
+      width: 100%;
+      height: calc(100vh);
+
+      .el-carousel__item {
+        display: flex;
+        justify-content: center;
+
+        img {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 192px;
+}
+</style>

src/views/user/user.vue

@@ -17,7 +17,7 @@
               placeholder="请输入关键字"
             />
           </div>
-          <div class="condition">
+          <!-- <div class="condition">
             <span>创建时间&nbsp;&nbsp;</span>
             <el-date-picker
               v-model="searchInput.createTime"
@@ -30,7 +30,7 @@
               :prefix-icon="Calendar"
               placeholder="请选择日期"
             />
-          </div>
+          </div> -->
           <el-button
             color="rgba(0, 97, 255, 1)"
             type="primary"
@@ -48,13 +48,11 @@
             type="primary"
             color="rgba(0, 97, 255, 1)"
             @click="addClick"
-            ><span>添加</span></el-button
-          >
-          <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
-            ><span>导出</span></el-button
+            plain
+            >新建身份</el-button
           >
           <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
-            ><span>导入</span></el-button
+            ><span>导出</span></el-button
           > -->
         </div>
       </div>
@@ -77,11 +75,8 @@
             type="index"
             label="序号"
           />
-          <el-table-column align="center" prop="hName" label="姓名" />
-          <el-table-column align="center" prop="price" label="手机号码" />
-          <el-table-column align="center" prop="number" label="角色" />
-          <el-table-column align="center" prop="number" label="部门" />
-          <el-table-column align="center" prop="number" label="创建时间" />
+          <el-table-column align="center" prop="userName" label="身份" />
+          <el-table-column align="center" prop="userPhone" label="身份id" />
           <el-table-column align="center" label="操作" width="200">
             <template #default="scope">
               <div class="edit">
@@ -140,23 +135,28 @@
           label-position="left"
           status-icon
         >
-          <el-form-item label="用户部门 :" prop="userDepartment">
+          <el-form-item label="身份 :" prop="userDepartment">
             <el-input
               v-model="editRuleForm.userDepartment"
-              placeholder="请输入用户部门"
+              placeholder="请输入身份"
               clearable
               style="width: 500px"
             />
           </el-form-item>
-          <el-form-item label="用户名 :" prop="userName">
-            <el-input
+          <el-form-item label="应用管理 :" prop="userName">
+            <el-select
               v-model="editRuleForm.userName"
-              placeholder="请输入用户名"
-              clearable
+              multiple
+              placeholder="请选择应用管理"
               style="width: 500px"
-            />
+            >
+              <el-option label="学生肖像" value="1" />
+              <el-option label="车辆预约" value="2" />
+              <el-option label="校园打卡" value="3" />
+              <el-option label="校园报修" value="4" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="用户角色 :" prop="userRoles">
+          <!-- <el-form-item label="用户角色 :" prop="userRoles">
             <el-select
               v-model="editRuleForm.userRoles"
               class="m-2"
@@ -196,7 +196,7 @@
                 <div @click="entering">录入</div>
               </template>
             </el-input>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item class="options">
             <el-button
               color="rgba(41, 109, 227, 1)"
@@ -204,94 +204,12 @@
               type="primary"
               @click="confirmEdit(editRef)"
             >
-              保存
+              确认
             </el-button>
             <el-button @click="cancelEdit(editRef)">取消</el-button>
           </el-form-item>
         </el-form>
       </el-dialog>
-
-      <!-- 指纹读取弹窗 -->
-      <el-dialog
-        class="fingerprint"
-        v-model="addFingerprintVisible"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        title="添加指纹"
-        align-center
-        width="550"
-        :before-close="cancelAddFingerprint"
-      >
-        <div class="el-footer">
-          <div style="height: 350px; margin: 30px auto">
-            <el-steps direction="vertical" :active="stepindex">
-              <el-step
-                v-for="i in step.list"
-                :key="i.id"
-                :title="`步骤 ${i.id}`"
-                :description="i.title"
-              ></el-step>
-            </el-steps>
-          </div>
-        </div>
-      </el-dialog>
-
-      <!-- 身份证读卡弹窗 -->
-      <el-dialog
-        class="addIdentityCard"
-        v-model="addIdentityCardVisible"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        title="添加身份证"
-        align-center
-        width="650"
-        :before-close="cancelAddIdentityCard"
-      >
-        <!-- <div class="el-footer">
-          {{ identityCardTitle }}
-        </div>
-        <div class="el-footer">卡号 :{{ identityCardNum }}</div> -->
-        <div class="steps">
-          <el-steps
-            :space="200"
-            :active="identityCardIndex"
-            finish-status="success"
-          >
-            <el-step title="环境准备" />
-            <el-step title="配置" />
-            <el-step title="完成" />
-          </el-steps>
-        </div>
-        <div
-          class="title"
-          v-if="identityCardIndex == 0 || identityCardIndex == 1"
-          style="color: #fc2307"
-        >
-          {{ identityCardTitle }}
-        </div>
-        <div class="title" v-else style="color: #68c23c">
-          {{ identityCardTitle }}
-        </div>
-        <div class="icons">
-          <img
-            v-if="identityCardIndex == 0 || identityCardIndex == 1"
-            src="@/assets/icons/error.png"
-            alt=""
-          />
-          <img
-            v-if="identityCardIndex == 2"
-            class="loading"
-            src="@/assets/icons/loading.png"
-            alt=""
-          />
-          <img
-            v-if="identityCardIndex == 3"
-            src="@/assets/icons/success.png"
-            alt=""
-          />
-        </div>
-        <div class="retry">可以尝试<span @click="retry">重试</span></div>
-      </el-dialog>
     </div>
     <div class="bgImg" v-if="bgImg">
       <el-carousel
@@ -334,26 +252,26 @@ const router = useRouter();
 const loading = ref(false);
 const tableData = reactive({
   list: [
-    // {
-    //   userName: "双人房",
-    //   userPhone: 150,
-    //   teamName: 12,
-    // },
-    // {
-    //   userName: "双人房",
-    //   userPhone: 150,
-    //   teamName: 12,
-    // },
-    // {
-    //   userName: "双人房",
-    //   userPhone: 150,
-    //   teamName: 12,
-    // },
-    // {
-    //   userName: "双人房",
-    //   userPhone: 150,
-    //   teamName: 12,
-    // },
+    {
+      userName: "张三",
+      userPhone: 15,
+      teamName: 12,
+    },
+    {
+      userName: "李四",
+      userPhone: 150,
+      teamName: 12,
+    },
+    {
+      userName: "栗子",
+      userPhone: 10,
+      teamName: 12,
+    },
+    {
+      userName: "王明",
+      userPhone: 50,
+      teamName: 12,
+    },
   ],
 });
 
@@ -383,12 +301,12 @@ const editRuleForm = reactive({
 // 表单验证
 const editRules = reactive({
   userDepartment: [
-    { required: true, message: "用户部门不能为空", trigger: "blur" },
+    { required: true, message: "身份不能为空", trigger: "blur" },
   ],
   userName: [
     {
       required: true,
-      message: "用户名不能为空",
+      message: "应用管理不能为空",
       trigger: "blur",
     },
   ],
@@ -444,42 +362,42 @@ const identityCardIndex = ref(0); // 读卡步骤
 
 // 查看房型列表
 const getList = async () => {
-  loading.value = true;
-  let data = {
-    page: currentPage.value,
-    rows: pageSize.value,
-    hName: searchInput.keyWord, // 房型名称
-    managerId: sessionStorage.getItem("token"),
-  };
-  let res = await axios({
-    method: "post",
-    url: api.value + "/mhotel/housequeryPage.action",
-    headers: {
-      // token: sessionStorage.getItem("token"),
-      // user_head: sessionStorage.getItem("userhead"),
-    },
-    params: data,
-  });
-  console.log(res, "房型管理");
-  if (res.data.code == 200) {
-    loading.value = false;
-    tableData.list = res.data.data.pageList;
-    total.value = res.data.data.total;
-    // ElMessage({
-    //   type: "success",
-    //   showClose: true,
-    //   message: res.data.message,
-    //   center: true,
-    // });
-  } else {
-    loading.value = false;
-    ElMessage({
-      type: "error",
-      showClose: true,
-      message: res.data.message,
-      center: true,
-    });
-  }
+  //   loading.value = true;
+  //   let data = {
+  //     page: currentPage.value,
+  //     rows: pageSize.value,
+  //     hName: searchInput.keyWord, // 房型名称
+  //     managerId: sessionStorage.getItem("token"),
+  //   };
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/housequeryPage.action",
+  //     headers: {
+  //       // token: sessionStorage.getItem("token"),
+  //       // user_head: sessionStorage.getItem("userhead"),
+  //     },
+  //     params: data,
+  //   });
+  //   console.log(res, "房型管理");
+  //   if (res.data.code == 200) {
+  //     loading.value = false;
+  //     tableData.list = res.data.data.pageList;
+  //     total.value = res.data.data.total;
+  //     // ElMessage({
+  //     //   type: "success",
+  //     //   showClose: true,
+  //     //   message: res.data.message,
+  //     //   center: true,
+  //     // });
+  //   } else {
+  //     loading.value = false;
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
 };
 
 // 搜索功能
@@ -610,34 +528,34 @@ const del = async (row) => {
   let data = {
     id: row.id,
   };
-  let res = await axios({
-    method: "post",
-    url: api.value + "/mhotel/housedelHouser.action",
-    headers: {
-      // token: sessionStorage.getItem("token"),
-      // user_head: sessionStorage.getItem("userhead"),
-    },
-    params: data,
-  });
-  if (res.data.code == 200) {
-    if (tableData.list.length == 1 && currentPage.value != 1) {
-      currentPage.value = currentPage.value - 1;
-    }
-    getList();
-    ElMessage({
-      type: "success",
-      showClose: true,
-      message: res.data.message,
-      center: true,
-    });
-  } else {
-    ElMessage({
-      type: "error",
-      showClose: true,
-      message: res.data.message,
-      center: true,
-    });
-  }
+  //   let res = await axios({
+  //     method: "post",
+  //     url: api.value + "/mhotel/housedelHouser.action",
+  //     headers: {
+  //       // token: sessionStorage.getItem("token"),
+  //       // user_head: sessionStorage.getItem("userhead"),
+  //     },
+  //     params: data,
+  //   });
+  //   if (res.data.code == 200) {
+  //     if (tableData.list.length == 1 && currentPage.value != 1) {
+  //       currentPage.value = currentPage.value - 1;
+  //     }
+  //     getList();
+  //     ElMessage({
+  //       type: "success",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   } else {
+  //     ElMessage({
+  //       type: "error",
+  //       showClose: true,
+  //       message: res.data.message,
+  //       center: true,
+  //     });
+  //   }
   // console.log(res);
 };
 
@@ -1100,7 +1018,7 @@ onUnmounted(() => {
         }
       }
       .options {
-        margin: 30px 20px 20px 0;
+        margin: 50px 20px 20px 0;
         width: 100%;
         .el-form-item__content {
           display: flex;

vite.config.js

@@ -2,9 +2,17 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import { resolve, join } from "path";
+
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+      symbolId: "[name]",
+    }),
+  ],
   resolve: {
     alias: {
       "@": path.resolve("./src"), // @代替src
@@ -19,7 +27,7 @@ export default defineConfig({
   },
   server: {
     host: "0.0.0.0",
-    port: 8877,
+    port: 6677,
     // 是否开启 https
     // https: false,
     // 线上地址 https://chtech.ncjti.edu.cn/hotelReservation/pc3/