新的 ui

src/App.vue

@@ -88,6 +88,7 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
+  background-color: #f5f5f5;
 }
 
 ul, li {
@@ -148,6 +149,7 @@ ul, li {
 
 .el-main {
   padding: 0 14px;
+  overflow: hidden;
 }
 
 .el-table__body tr.current-row > td,
@@ -292,6 +294,7 @@ table th.star div::before {
   background-color: white;
   padding: 10px 16px;
   box-shadow: 1px 3px 8px 4px rgb(0 0 0 / 10%);
+
   .el-message__content {
     color: #333333;
   }

src/components/xc/xc-table/XcTable.vue

@@ -90,11 +90,6 @@ const windowSize = computed(() => {
 })
 
 const tableData = computed(() => {
-
-  if (props.isArray) {
-    return props.data
-  }
-
   if (props.localPaging) {
     return props.data.data.slice((props.data.currentPage - 1) * props.data.pageSize, props.data.currentPage * props.data.pageSize)
   } else {
@@ -150,7 +145,9 @@ const currentChange = (val) => {
 const sizeChange = (val) => {
   props.data.pageSize = val
   props.data.currentPage = 1
-  props.data.total = 0
+  if (!props.localPaging) {
+    props.data.total = 0
+  }
   emit('sizeChange', val)
   tableRef.value.setScrollTop(0)
 }

src/layout/Header/functionList/UserInfo.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-popover :width="260" trigger="click" :offset="24">
+    <template #reference>
+
+      <div style="white-space: nowrap;display: flex;justify-content: center;align-items: center">
+        <div>
+          <el-avatar :size="25" :src="userInfo.avatar" @error="errorHandler">
+            <img :src="makeTextPortrait()"/>
+          </el-avatar>
+        </div>
+
+        <div>
+          {{ userInfo.name }}
+        </div>
+      </div>
+
+    </template>
+
+    <template #default>
+      <div class="avatar_img">
+        <el-avatar :size="70" :src="userInfo.avatar" @error="errorHandler">
+          <img :src="makeTextPortrait()"/>
+        </el-avatar>
+        <div>
+          {{ userInfo.ybCode }}
+        </div>
+
+      </div>
+
+      <div class="button">
+        <el-button type="primary" plain @click="emit('password')">修改密码</el-button>
+        <el-button type="danger" plain @click="emit('loginOut')">退出登录</el-button>
+      </div>
+    </template>
+  </el-popover>
+
+</template>
+
+<script setup name='UserInfo' lang="ts">
+import {computed} from "vue";
+import {useStore} from "vuex";
+import {genTextPortrait} from '@/utils/portrait'
+
+const store = useStore()
+const emit = defineEmits(['password', 'loginOut'])
+
+const userInfo = computed(() => {
+  return store.getters['user/info']
+})
+
+const makeTextPortrait = () => {
+  return genTextPortrait(userInfo.value.name)
+}
+
+const errorHandler = () => {
+  return true
+}
+
+</script>
+
+<style scoped lang="scss">
+.avatar_img {
+  text-align: center;
+}
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+</style>

src/layout/HeaderV2/HeaderV2.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="header_v2_main">
+    <route-navigation/>
+    <div class="toolbar">
+      <tool-info-bar ref="toolInfoBarRef"/>
+    </div>
+  </div>
+</template>
+
+<script setup name='HeaderV2' lang="ts">
+import RouteNavigation from "@/layout/HeaderV2/RouteNavigation.vue";
+import ToolInfoBar from "./ToolInfoBar.vue";
+
+
+</script>
+
+<style scoped lang="scss">
+.header_v2_main {
+  display: flex;
+  height: 50px;
+  margin: 8px 16px 0 16px;
+
+  .toolbar {
+    width: max-content;
+    height: 40px;
+    border-radius: 5px;
+    background-color: white;
+    box-shadow: var(--el-box-shadow-light);
+    padding: 0 8px 0 5px;
+  }
+}
+</style>

src/layout/HeaderV2/RouteNavigation.vue

@@ -0,0 +1,273 @@
+<template>
+  <right-click-menu :mouse-position="mousePosition"
+                    :config="opt"/>
+  <div class="route_navigation_main" ref="tagRef">
+    <div v-for="(item,index) in menuList"
+         class="item"
+         @contextmenu.prevent="contextmenuItem(item,index,$event)"
+         :class="currentPath === item.path ? 'active' : '' "
+         @click="router.push(item.path)">
+      {{ item.title }}
+      <el-icon @click.stop.prevent="closeRouter(index,item.path)">
+        <Close/>
+      </el-icon>
+    </div>
+    <div class="active-box" :style="selectedStyle">
+
+    </div>
+  </div>
+</template>
+
+<script setup name='RouteNavigation'>
+import {ref} from "vue";
+import tabsHook from "@/layout/Tabs/tabsHook";
+import {useRouter} from "vue-router";
+import RightClickMenu from "@/components/menu-item/RightClickMenu";
+import sleep from "@/utils/sleep";
+
+const router = useRouter()
+const tagRef = ref(null)
+
+const opt = [
+  {
+    name: '关闭', click: (data, index) => {
+      closeRouter(index, data.path)
+    }
+  },
+  {
+    name: '关闭其他选项卡', click: (data, index) => {
+      router.push(data.path)
+      setLabel([data])
+    }
+  },
+  {
+    name: '关闭所有选项卡', click: (data, index) => {
+      menuList.value = []
+      menuKey = []
+      backToTheHomepage()
+    }
+  },
+  {
+    name: '关闭左侧选项卡', click: (data, index) => {
+      if (index === 0) return
+      if (index > currentIndex) {
+        router.push(data.path)
+      }
+      let temp = []
+      for (let i = index; i < menuList.value.length; i++) {
+        temp.push(menuList.value[i])
+      }
+      setLabel(temp)
+    }
+  },
+  {
+    name: '关闭右侧选项卡', click: (data, index) => {
+      if (index + 1 === menuList.value.length) return
+      if (index < currentIndex) {
+        router.push(data.path)
+      }
+      let temp = []
+      for (let i = 0; i < index + 1; i++) {
+        temp.push(menuList.value[i])
+      }
+      setLabel(temp)
+    }
+  }
+]
+
+
+const mousePosition = ref()
+const contextmenuItem = async (item, index, event) => {
+  mousePosition.value = {
+    event,
+    data: item,
+    index
+  }
+}
+
+let menuList = ref([])
+menuList.value = tabsHook.getItem()
+let menuKey = $ref([])
+menuKey = tabsHook.getItemKey();
+
+let currentPath = $ref('')
+let currentIndex = -1
+
+const closeRouter = (index, path) => {
+  menuList.value.splice(index, 1)
+  menuKey.splice(index, 1)
+
+  if (menuList.value.length === 0) {
+    let data = {
+      path: '/dashboard',
+      title: '首页',
+    }
+    menuList.value.push(data)
+    menuKey.push(JSON.stringify(data))
+    router.push('/dashboard')
+  } else {
+    if (router.currentRoute.value.path === path || router.currentRoute.value.meta.activeMenu === path) {
+      let temp = index === menuList.value.length ? menuList.value.length - 1 : index
+      router.push(menuList.value[temp]?.path)
+    }
+  }
+}
+
+// 设置标签
+const setLabel = (data) => {
+  menuList.value = data
+  menuKey.value = []
+  for (let i = 0, len = menuList.value.length; i < len; i++) {
+    menuKey.value.push(JSON.stringify(menuList.value[i]))
+  }
+}
+
+// 回到首页
+const backToTheHomepage = () => {
+  router.push('/dashboard')
+}
+
+// 设置滚动条位置
+const handleScrolling = async (str) => {
+  currentIndex = menuList.value.findIndex((item) => {
+    return item.path === str.path
+  })
+  if (currentIndex === -1) return
+  let itemData = tagRef.value.querySelectorAll('.item')
+  let scroll = 0;
+  for (let i = 0; i < currentIndex; i++) {
+    let item = itemData[i]
+    scroll += item.scrollWidth
+  }
+  selectedStyle = {
+    width: itemData[currentIndex].clientWidth + 'px',
+    transform: `translateX(${scroll}px)`
+  }
+  tagRef.value.scrollTo({top: 0, left: scroll, behavior: 'smooth'})
+}
+
+let selectedStyle = $ref({})
+
+
+watch(() => menuList.value, () => {
+  tabsHook.setItem(menuList.value)
+  routingChanges()
+}, {deep: true})
+
+const createLabels = (str, data) => {
+  if (menuKey.indexOf(str) > -1) return
+  menuList.value.push(data)
+  tabsHook.setItem(menuList.value)
+  menuKey.push(str)
+}
+
+const routingChanges = () => {
+  let currentRoute = router.currentRoute.value
+  currentPath = currentRoute.path
+  let data = {
+    path: currentRoute.path,
+    title: currentRoute.meta.title
+  }
+  let str = JSON.stringify(data)
+
+  if (currentRoute.meta.parentName && currentRoute.meta.activeMenu) {
+    data.path = currentRoute.meta.activeMenu
+    data.title = currentRoute.meta.parentName
+    str = JSON.stringify(data)
+    createLabels(str, data)
+  }
+  nextTick(() => {
+    handleScrolling(data)
+  })
+  // 不需要你创建
+  if (currentRoute.meta.hideTabs) return;
+  createLabels(str, data)
+}
+
+watch(() => router.currentRoute.value, () => {
+  routingChanges()
+}, {immediate: true})
+
+
+</script>
+
+<style scoped lang="scss">
+$item-height: 40px;
+
+
+.route_navigation_main {
+  flex: 1;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-right: 16px;
+  //padding-bottom: 5px;
+}
+
+.active-box {
+  position: absolute;
+  height: $item-height;
+  border-radius: 4px;
+  background-color: white;
+  box-shadow: var(--el-box-shadow-light);
+  transition: all .2s;
+  -webkit-transition: all .2s;
+}
+
+
+.route_navigation_main::-webkit-scrollbar {
+  height: 5px;
+  background-color: #eaeaea;
+}
+
+.route_navigation_main:hover ::-webkit-scrollbar-track-piece {
+  /*鼠标移动上去再显示滚动条*/
+  background-color: #fff;
+  /* 滚动条的背景颜色 */
+  border-radius: 6px;
+  /* 滚动条的圆角宽度 */
+}
+
+
+.route_navigation_main:hover::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(28, 28, 28, 0.2);
+  background: #535353;
+}
+
+.route_navigation_main:hover::-webkit-scrollbar-track { /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #dcdcdc;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  cursor: pointer;
+  z-index: 1;
+  height: $item-height;
+  user-select: none;
+  transition: all .2s;
+  white-space: nowrap;
+  -webkit-transition: all .2s;
+
+  i {
+    padding: 2px;
+    font-size: 12px;
+    margin-left: 5px;
+    color: rgb(0, 0, 0);
+
+    &:hover {
+      background-color: #0a84fd;
+      color: white;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/layout/HeaderV2/ToolInfoBar.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="tool_info_bar">
+    <!-- 快捷功能按钮 -->
+    <div class="function-list">
+      <div class="function-list-item">
+        <Download/>
+      </div>
+      <div class="function-list-item">
+        <Message/>
+      </div>
+      <div class="function-list-item">
+        <Full-screen/>
+      </div>
+      <div class="function-list-item">
+        <SizeChange/>
+      </div>
+      <div class="function-list-item">
+        <Theme/>
+      </div>
+      <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px">
+        <user-info @password="showPasswordLayer" @loginOut="loginOut"/>
+      </div>
+    </div>
+    <!-- 修改密码 -->
+    <password-layer v-if="layer.show" :layer="layer"/>
+  </div>
+</template>
+
+<script setup name='ToolInfoBar' lang="ts">
+import {computed, reactive} from 'vue'
+import {useStore} from 'vuex'
+import Download from '../Header/functionList/download.vue'
+import Message from '../Header/functionList/message.vue'
+import FullScreen from '../Header/functionList/fullscreen.vue'
+import SizeChange from '../Header/functionList/sizeChange.vue'
+import Theme from '../Header/functionList/theme.vue'
+import PasswordLayer from '../Header/passwordLayer'
+import UserInfo from "../Header/functionList/UserInfo.vue";
+
+const store = useStore()
+
+const userInfo = computed(() => {
+  return store.getters['user/info']
+})
+
+
+const layer = reactive({
+  show: false,
+  showButton: true,
+})
+
+const showPasswordLayer = () => {
+  layer.show = true
+}
+
+const loginOut = () => {
+  store.dispatch('user/loginOut')
+}
+
+</script>
+
+<style scoped lang="scss">
+.tool_info_bar {
+  height: 100%;
+  display: flex;
+  width: 100%;
+}
+
+
+.function-list {
+  display: flex;
+
+  .function-list-item {
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      cursor: pointer;
+      background-color: rgb(245, 245, 245);
+    }
+
+    :deep(i) {
+      color: var(--system-header-text-color);
+    }
+  }
+}
+
+.user-info {
+  margin-left: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .el-dropdown-link {
+    color: var(--system-header-breadcrumb-text-color);
+  }
+}
+
+</style>

src/layout/Logo/index.vue

@@ -1,54 +1,80 @@
 <template>
-  <div class="logo-container">
-    <img :style="logoStyle" alt="" src="@/assets/csthyylogoplain.png" />
-    <h1 v-if="!isCollapse">
-      {{ systemTitle }}
-      <br />
-      <span style="font-size: 12px">机构编码:H43010500370 </span>
-    </h1>
+  <div class="box">
+    <div class="logo-container" v-if="!isCollapse">
+      <img alt="" src="@/assets/csthyylogoplain.png"/>
+      <h1>
+        {{ systemTitle }}
+        <br/>
+        <span style="font-size: 12px">编码:H43010500370 </span>
+      </h1>
+    </div>
+    <div class="search_button">
+      <!-- 收缩按钮 -->
+      <div class="menu-icon" @click="opendStateChange">
+        <el-icon style="font-size: 22px">
+          <Expand v-if="isCollapse"/>
+          <Fold v-else/>
+        </el-icon>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { systemTitle } from '@/config'
+import {computed, defineComponent} from 'vue'
+import {useStore} from 'vuex'
+import {systemTitle} from '@/config'
 
 export default defineComponent({
   setup() {
     const store = useStore()
     const isCollapse = computed(() => store.state.app.isCollapse)
-    const logoStyle = computed(() => {
-      return {
-        width: '60px',
-        marginLeft: isCollapse.value ? '0' : '12px',
-      }
-    })
+
+    const opendStateChange = () => {
+      store.commit('app/isCollapseChange', !isCollapse.value)
+    }
+
     return {
       isCollapse,
-      logoStyle,
       systemTitle,
+      opendStateChange
     }
   },
 })
 </script>
 
 <style lang="scss" scoped>
+
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  padding: 10px;
+  background-color: white;
+
+  .search_button {
+    margin-right: 5px;
+    font-size: 30px;
+  }
+}
+
 .logo-container {
-  height: 60px;
   display: flex;
   align-items: center;
-  // justify-content: center;
   width: 100%;
-  // background-color: var(--system-logo-background);
   background-color: white;
+  padding-left: 5px;
+  img {
+    width: 28px
+  }
+
 
   h1 {
-    font-size: 20px;
+    font-size: 12px;
     white-space: nowrap;
-    // color: var(--system-logo-color);
     color: black;
-    margin-left: 12px;
+    margin-left: 5px;
   }
 }
 </style>

src/layout/MenuV2/MenuItemV2.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-sub-menu v-if="data?.children && data?.children.length > 1" :index="data?.completeRoute">
+    <template #title>
+      <i :class="data?.meta?.icon" v-if="data?.meta?.icon"></i>
+      <span>{{ data?.metaTitle }}</span>
+    </template>
+    <menu-item-v2 :data="item" v-for="item in data?.children"/>
+  </el-sub-menu>
+  <el-menu-item v-else-if="data?.children && data?.children.length === 1" :index="data?.children[0]?.completeRoute">
+    <i :class="data?.children[0]?.meta?.icon" v-if="data?.children[0]?.meta?.icon"></i>
+    <span>{{ data?.children[0]?.metaTitle }}</span>
+  </el-menu-item>
+  <el-menu-item v-else :index="data?.completeRoute">
+    <i :class="data?.meta?.icon" v-if="data?.meta?.icon"></i>
+    <span>{{ data?.metaTitle }}</span>
+  </el-menu-item>
+</template>
+
+<script setup name='MenuItemV2' lang="ts">
+import {defineProps} from 'vue'
+
+const props = defineProps({
+  data: Object
+})
+
+
+</script>
+
+<style scoped lang="scss">
+i {
+  margin-right: 5px;
+}
+</style>
+
+//4224

src/layout/MenuV2/MenuV2.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="floating" ref="floatingRef">
+    <Logo ref="logoRef"/>
+    <el-scrollbar :height="floatingRef?.clientHeight - logoRef?.clientHeight">
+      <el-menu router
+               :collapse-transition="false"
+               :collapse="isCollapse"
+               :default-active="activeMenu"
+               :unique-opened="expandOneMenu">
+        <menu-item-v2 v-for="item in data" :data="item"></menu-item-v2>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup name='MenuV2' lang="ts">
+import store from '@/store'
+import MenuItemV2 from "./MenuItemV2.vue";
+import {computed, Ref, ref} from "vue";
+import {useRoute} from "vue-router";
+import Logo from '../Logo/index.vue'
+
+const data = store.state.user.routes
+const expandOneMenu = computed(() => store.state.app.expandOneMenu)
+const route = useRoute()
+const isCollapse = computed(() => store.state.app.isCollapse)
+
+const logoRef: Ref<HTMLHtmlElement> = ref(null)
+const floatingRef: Ref<HTMLHtmlElement> = ref(null)
+
+
+const activeMenu = computed(() => {
+  const {meta, path} = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.floating {
+  height: 100%;
+  width: 100%;
+
+  .el-menu {
+    border-right: 0 !important;
+    position: relative;
+  }
+
+  .menu {
+    overflow: auto;
+  }
+
+}
+:deep(.el-sub-menu__title) {
+  padding: 0 16px;
+}
+</style>

src/layout/Tabs/tabsHook.js

@@ -1,9 +1,19 @@
+import {clone} from "@/utils/clone";
+
 const tabsHook = {
-  setItem: function (arr) {
-    localStorage.setItem('tabs', JSON.stringify(arr))
-  },
-  getItem: function () {
-    return JSON.parse(localStorage.getItem('tabs') || '[]')
-  },
+    setItem: function (arr) {
+        localStorage.setItem('tabs', JSON.stringify(arr))
+    },
+    getItem: function () {
+        return clone(JSON.parse(localStorage.getItem('tabs') || '[]'))
+    },
+    getItemKey: function () {
+        let data = this.getItem()
+        let temp = []
+        for (let i = 0; i < data.length; i++) {
+            temp.push(JSON.stringify(data[i]))
+        }
+        return temp
+    }
 }
 export default tabsHook

src/layout/index.vue

@@ -1,26 +1,27 @@
 <template>
   <el-container style="height: 100vh">
     <div class="mask" v-show="!isCollapse && !contentFullScreen" @click="hideMenu"></div>
-    <el-aside :width="isCollapse ? '60px' : '250px'"
+    <el-aside :width="isCollapse ? '50px' : '260px'"
+              class="layout_aside"
               :class="isCollapse ? 'hide-aside' : 'show-side'"
               v-show="!contentFullScreen">
-      <Logo v-if="showLogo"/>
-      <Menu/>
+      <menu-v2/>
     </el-aside>
-    <el-container>
-      <el-header v-show="!contentFullScreen" style="height: 60px; display: block">
-        <Header/>
+    <el-container style="height: 100vh">
+      <el-header v-show="!contentFullScreen" style="height: 50px; display: block">
+        <header-v2/>
       </el-header>
-      <Tabs v-show="showTabs"/>
-      <el-main>
-        <router-view v-slot="{ Component }">
-          <transition name="fade-transform" mode="out-in">
-            <keep-alive>
-              <component :is="Component"/>
-            </keep-alive>
-          </transition>
-        </router-view>
-      </el-main>
+      <el-scrollbar :height="height - 80" class="scrollbar">
+        <el-main>
+          <router-view v-slot="{ Component }">
+            <transition name="fade-transform" mode="out-in">
+              <keep-alive>
+                <component :is="Component"/>
+              </keep-alive>
+            </transition>
+          </router-view>
+        </el-main>
+      </el-scrollbar>
     </el-container>
   </el-container>
 </template>
@@ -28,12 +29,13 @@
 <script setup>
 import {computed, onMounted} from 'vue'
 import {useStore} from 'vuex'
-import Menu from './Menu/index.vue'
-import Logo from './Logo/index.vue'
-import Header from './Header/index.vue'
-import Tabs from './Tabs/index.vue'
 import {useRouter} from 'vue-router'
 import {initWebSocket} from '@/utils/websocket'
+import MenuV2 from "@/layout/MenuV2/MenuV2";
+import HeaderV2 from "@/layout/HeaderV2/HeaderV2";
+import {useWindowSize} from '@vueuse/core'
+
+const {width, height} = useWindowSize()
 
 const store = useStore()
 const isCollapse = computed(() => store.state.app.isCollapse)
@@ -42,8 +44,6 @@ const showLogo = computed(() => store.state.app.showLogo)
 const showTabs = computed(() => store.state.app.showTabs)
 
 
-
-
 const hideMenu = () => {
   store.commit('app/isCollapseChange', true)
 }
@@ -57,6 +57,8 @@ const initSocket = () => {
     router.push('/login')
   }
 }
+
+
 onMounted(() => {
   if (store.getters['user/token']) {
     initSocket()
@@ -66,9 +68,21 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+
+.layout_aside {
+  margin: 16px 0 9px 16px;
+  //height: calc(100vh - 32px);
+  box-shadow: 0 0 12px rgba(0, 0, 0, .12);;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: width .3s ease;
+  background-color: white;
+}
+
 .el-header {
   padding-left: 0;
   padding-right: 0;
+  background-color: transparent;
 }
 
 .el-aside {
@@ -88,11 +102,17 @@ onMounted(() => {
   padding: 0;
 }
 
+.scrollbar {
+  padding: 5px 5px 20px 5px;
+  margin: 8px;
+  box-shadow: var(--el-box-shadow-light);
+  border-radius: 5px;
+}
+
 .el-main-box {
   width: 100%;
   min-width: 1200px;
   height: 100%;
-  overflow-y: auto;
   box-sizing: border-box;
 }
 

src/router/createNode.js

@@ -1,31 +1,31 @@
 // 1. 用于解决keep-alive需要name的问题，动态生成随机name供keep-alive使用
 // 2. 用于解决transition动画内部结点只能为根元素的问题，单文件可写多结点
-import { defineComponent, h, createVNode, ref } from 'vue'
+import {defineComponent, h, createVNode, ref} from 'vue'
 import reload from './reload.vue'
 
 export function createNameComponent(component) {
-  return () => {
-    return new Promise((res) => {
-      component().then((comm) => {
-        const name = (comm.default.name || 'vueAdminBox') + '$' + Date.now()
-        const tempComm = defineComponent({
-          name,
-          setup() {
-            const isReload = ref(false)
-            return {
-              isReload,
-            }
-          },
-          render: function () {
-            if (this.isReload) {
-              return h('div', { class: 'el-main-box' }, [h(reload)])
-            } else {
-              return h('div', { class: 'el-main-box' }, [createVNode(comm.default)])
-            }
-          },
+    return () => {
+        return new Promise((res) => {
+            component().then((comm) => {
+                const name = (comm.default.name || 'vueAdminBox') + '$' + Date.now()
+                const tempComm = defineComponent({
+                    name,
+                    setup() {
+                        const isReload = ref(false)
+                        return {
+                            isReload,
+                        }
+                    },
+                    render: function () {
+                        if (this.isReload) {
+                            return h('div', {}, [h(reload)])
+                        } else {
+                            return h('div', {}, [createVNode(comm.default)])
+                        }
+                    },
+                })
+                res(tempComm)
+            })
         })
-        res(tempComm)
-      })
-    })
-  }
+    }
 }

src/router/modules/dashboard.js

@@ -28,7 +28,7 @@ const route = [
             {
                 path: 'dashboard',
                 component: createNameComponent(() => import('@/views/dashboard/index.vue')),
-                meta: {title: '首页', icon: 'el-icon-menu', hideClose: true, hideTabs: true},
+                meta: {title: '首页', icon: 'el-icon-menu', hideClose: true},
             },
         ],
     }, // 这里以下都是临时新加的
@@ -329,11 +329,6 @@ const route = [
                 component: createNameComponent(() => import('@/views/reports/InpatientAddrAnalyze.vue')),
                 meta: {title: '住院患者分布', icon: 'iconfont icon-menzhenteshubingdingdianbiangeng2'},
             },
-            {
-                path: 'outpatientCoordination',
-                component: createNameComponent(() => import('@/views/reports/OutpatientCoordination.vue')),
-                meta: {title: '门诊统筹统计', icon: 'iconfont icon-menzhenrenci'},
-            },
         ],
     },
     {
@@ -474,6 +469,7 @@ const route = [
                             icon: 'iconfont icon-huizhenshenqing',
                             passRule: true,
                             activeMenu: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
+                            parentName: '住院医生',
                         },
                     },
                     {
@@ -485,6 +481,7 @@ const route = [
                             icon: 'iconfont icon-jianchashenqing',
                             passRule: true,
                             activeMenu: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
+                            parentName: '住院医生',
                         },
                     },
                     {
@@ -495,6 +492,7 @@ const route = [
                             hideTabs: true,
                             passRule: true,
                             activeMenu: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
+                            parentName: '住院医生',
                         },
                     },
                     {
@@ -505,6 +503,7 @@ const route = [
                             hideTabs: true,
                             passRule: true,
                             activeMenu: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
+                            parentName: '住院医生',
                         },
                     },
                     {
@@ -515,6 +514,7 @@ const route = [
                             hideTabs: true,
                             passRule: true,
                             activeMenu: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
+                            parentName: '住院医生',
                         },
                     },
                 ],

src/views/clinic/WxPayRefund.vue

@@ -26,7 +26,7 @@
       <el-button type="primary" icon="Upload" @click="exportExcel">导出Excel</el-button>
     </el-header>
     <el-main>
-      <el-table :data="data.list" stripe highlight-current-row :height="tableHeight">
+      <el-table :data="data.list" stripe highlight-current-row >
         <el-table-column prop="patientId" label="门诊ID" width="80"></el-table-column>
         <el-table-column prop="patientName" label="姓名" width="80"></el-table-column>
         <el-table-column prop="body" label="商品" width="180"></el-table-column>

src/views/dashboard/index.vue

@@ -8,7 +8,7 @@
             <div class="divider-text">
               <div class="avatar-box__inner">
                 <el-avatar :size="80" :src="userInfo.avatar" @error="errorHandler">
-                  <img :src="makeTextPortrait()" />
+                  <img :src="makeTextPortrait()"/>
                 </el-avatar>
               </div>
             </div>
@@ -17,11 +17,11 @@
               &nbsp;
               {{ userInfo.deptName }}
               &nbsp;
-              <MyClock :show-logo="false" size="small" />
+              <MyClock :show-logo="false" size="small"/>
             </div>
           </div>
           <div style="display: flex; flex-wrap: wrap; height: 480px; overflow-y: auto">
-            <Inpatient v-for="(itm, index) in briefs" :key="index" :brief="itm" />
+            <Inpatient v-for="(itm, index) in briefs" :key="index" :brief="itm"/>
           </div>
         </div>
         <!-- 右边部分 -->
@@ -42,14 +42,13 @@
 </template>
 
 <script setup name="Dashboard">
-import { computed, onActivated, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { selectSystemMessages } from '../../api/messages/index'
-import { formatDate } from '../../utils/date'
-import { getUserInfo } from '@/api/settings/user-settings'
-import { genTextPortrait } from '@/utils/portrait'
-import { isInpatientStaff } from '@/utils/permission'
-import { selectInpatientBriefs } from '../../api/dashboard/index'
+import {computed, onActivated, onMounted, ref, watch} from 'vue'
+import {useStore} from 'vuex'
+import {selectSystemMessages} from '../../api/messages/index'
+import {formatDate} from '@/utils/date'
+import {genTextPortrait} from '@/utils/portrait'
+import {isInpatientStaff} from '@/utils/permission'
+import {selectInpatientBriefs} from '../../api/dashboard/index'
 import MyClock from '@/components/MyClock.vue'
 import Inpatient from '@/components/dashboard/Inpatient.vue'
 
@@ -58,12 +57,12 @@ const token = computed(() => {
   return store.state.user.token
 })
 watch(
-  () => token.value,
-  () => {
-    setTimeout(() => {
-      location.reload()
-    }, 100)
-  }
+    () => token.value,
+    () => {
+      setTimeout(() => {
+        location.reload()
+      }, 100)
+    }
 )
 
 const messages = ref([])
@@ -79,7 +78,9 @@ const fetchMoreMessages = () => {
   })
 }
 
-const userInfo = ref({})
+const userInfo = computed(() => {
+  return store.getters['user/info']
+})
 const errorHandler = () => {
   return true
 }
@@ -98,14 +99,11 @@ onActivated(() => {
 const briefs = ref([])
 
 onMounted(() => {
-  getUserInfo().then((res) => {
-    userInfo.value = res
-    if (isInpatientStaff()) {
-      selectInpatientBriefs(res.deptCode).then((list) => {
-        briefs.value = list
-      })
-    }
-  })
+  if (isInpatientStaff()) {
+    selectInpatientBriefs(userInfo.value.deptCode).then((list) => {
+      briefs.value = list
+    })
+  }
 })
 </script>
 
@@ -118,6 +116,7 @@ onMounted(() => {
   border-radius: 6px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 }
+
 .right-pane {
   margin-top: 20px;
   width: 30%;
@@ -125,6 +124,7 @@ onMounted(() => {
   height: 80vh;
   overflow-y: scroll;
 }
+
 .avatar-box__inner {
   display: flex;
   align-items: center;
@@ -135,10 +135,12 @@ onMounted(() => {
   border-bottom: 3px solid #1080f0;
   z-index: 600;
 }
+
 .check-more {
   width: 60%;
   text-align: right;
   color: #409eff;
+
   &:hover {
     cursor: pointer;
   }
@@ -152,6 +154,7 @@ onMounted(() => {
   background-color: #4297ec88;
   position: relative;
 }
+
 .divider-text {
   left: 12px;
   -webkit-transform: translateY(-55%);
@@ -161,6 +164,7 @@ onMounted(() => {
   color: black;
   font-size: 14px;
 }
+
 .psninfo-box {
   display: flex;
   left: 108px;

src/views/hospitalization/zhu-yuan-yi-sheng/Home.vue

@@ -4,7 +4,7 @@
       <el-aside style="width:auto !important;">
         <Overview v-show="xianShiLieBiao" :showSelection="false"/>
       </el-aside>
-      <el-main>
+      <el-main class="main">
         <huan-zhe-xin-xi v-show="basicPatientInformation"></huan-zhe-xin-xi>
         <el-row v-show="xianShiLieBiao" class="tabs">
           <template v-for="item in pathList">
@@ -95,4 +95,8 @@ const currentPagePosition = (val) => {
   }
 
 }
+
+.main {
+  overflow: auto;
+}
 </style>

src/views/hospitalization/zhu-yuan-yi-sheng/HuiZhenShenQing.vue

@@ -5,7 +5,7 @@
       <el-button icon="Plus" type="success" @click="dianJiHuiZhenShenQing">会诊申请</el-button>
     </el-header>
     <el-main>
-      <el-table :data="chaKanHuiZhenList" :height="windowSize.h / 1.5">
+      <xc-table :data="chaKanHuiZhenList" local-paging :height="215">
         <el-table-column label="住院号" prop="inpatientNo" width="90"></el-table-column>
         <el-table-column label="住院次数" prop="admissTimes" width="70"></el-table-column>
         <el-table-column label="申请人" prop="inputName" width="60"></el-table-column>
@@ -28,7 +28,7 @@
             <el-popconfirm
                 cancel-button-text="取消"
                 confirm-button-text="确定"
-                icon="Info"
+                icon="InfoFilled"
                 icon-color="red"
                 title="确定要删除吗？"
                 @confirm="shanChuHuiZhenShenQingClick(scope.$index, scope.row)"
@@ -41,7 +41,7 @@
             <el-button circle class="iconfont icon-dayin" @click="dianJiDaYingHuiZhen(scope.row)"></el-button>
           </template>
         </el-table-column>
-      </el-table>
+      </xc-table>
     </el-main>
     <el-dialog v-model="huiZhenXiangQingDuiHua" title="会诊详情" width="920px">
       <da-ying-hui-zhen ref="daYingHuiZhenRef" :lai-yuan="2"></da-ying-hui-zhen>
@@ -50,7 +50,7 @@
                                  @close="daKaiHuiZhenShenQing = false"></tian-jia-hui-zhen-shen-qing>
   </el-container>
 </template>
-<script>
+<script setup name="HuiZhenShenQing">
 import TianJiaHuiZhenShenQing from '@/components/zhu-yuan-yi-sheng/hui-zhen-shen-qing/TianJiaHuiZhenShenQing.vue'
 import {computed, onActivated, ref, watch} from 'vue'
 import {chaKanHuiZhenShenQing, shanChuHuiZhenShenQing} from '@/api/case-front-sheet'
@@ -58,92 +58,78 @@ import {huanZheXinXi, youWuXuanZheHuanZhe} from '@/views/hospitalization/zhu-yua
 import store from '@/store'
 import DaYingHuiZhen from '@/components/hui-zhen-da-ying/DaYingHuiZhen.vue'
 import {getHuanZheXinXi} from '@/api/case-front-sheet/jie-shou-hui-zhen'
+import XcTable from "@/components/xc/xc-table/XcTable";
 
-export default {
-  name: 'HuiZhenShenQing',
-  components: {DaYingHuiZhen, TianJiaHuiZhenShenQing},
-  setup() {
-    const windowSize = computed(() => {
-      return store.state.app.windowSize
-    })
+const windowSize = computed(() => {
+  return store.state.app.windowSize
+})
 
-    const tianJiaHuiZhen = ref(null)
-    const daKaiHuiZhenShenQing = ref(false)
+const tianJiaHuiZhen = ref(null)
+const daKaiHuiZhenShenQing = ref(false)
 
-    const chaKanHuiZhenList = ref([])
-    const chaKanHuiZhenShenQingClick = () => {
-      if (youWuXuanZheHuanZhe()) return
-      chaKanHuiZhenShenQing(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes).then((res) => {
-        chaKanHuiZhenList.value = res
-      })
-    }
-
-    const shanChuHuiZhenShenQingClick = (index, val) => {
-      shanChuHuiZhenShenQing(val.inpatientNo, val.admissTimes, val.actOrderNo, val.reqTimes).then((res) => {
-        chaKanHuiZhenList.value.splice(index, 1)
-      })
-    }
+const chaKanHuiZhenList = ref({
+  data: [],
+  currentPage: 1,
+  pageSize: 30,
+  total: 0
+})
+const chaKanHuiZhenShenQingClick = () => {
+  if (youWuXuanZheHuanZhe()) return
+  chaKanHuiZhenShenQing(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes).then((res) => {
+    chaKanHuiZhenList.value.data = res
+    chaKanHuiZhenList.value.total = chaKanHuiZhenList.value.data.length
+  })
+}
 
-    const dianJiHuiZhenShenQing = () => {
-      if (youWuXuanZheHuanZhe()) return
-      daKaiHuiZhenShenQing.value = true
-    }
+const shanChuHuiZhenShenQingClick = (index, val) => {
+  shanChuHuiZhenShenQing(val.inpatientNo, val.admissTimes, val.actOrderNo, val.reqTimes).then((res) => {
+    chaKanHuiZhenList.value.data.splice(index, 1)
+  })
+}
 
-    /**
-     * 打印会诊信息对话框
-     * @type {Ref<UnwrapRef<boolean>>}
-     */
-    const huiZhenXiangQingDuiHua = ref(false)
-    const daYingHuiZhenRef = ref(null)
+const dianJiHuiZhenShenQing = () => {
+  if (youWuXuanZheHuanZhe()) return
+  daKaiHuiZhenShenQing.value = true
+}
 
-    const chaKanHuiZhenDan = (val) => {
-      getHuanZheXinXi(val.admissTimes, val.reqTimes, val.inpatientNo).then((res) => {
-        huiZhenXiangQingDuiHua.value = true
-        setTimeout(() => {
-          daYingHuiZhenRef.value.huiZhenXinXiXiangQing(res)
-        }, 100)
-      })
-    }
+/**
+ * 打印会诊信息对话框
+ * @type {Ref<UnwrapRef<boolean>>}
+ */
+const huiZhenXiangQingDuiHua = ref(false)
+const daYingHuiZhenRef = ref(null)
 
-    const dianJiDaYingHuiZhen = (val) => {
-      getHuanZheXinXi(val.admissTimes, val.reqTimes, val.inpatientNo).then((res) => {
-        huiZhenXiangQingDuiHua.value = true
-        setTimeout(() => {
-          daYingHuiZhenRef.value.huiZhenXinXiXiangQing(res)
-        }, 100)
-        setTimeout(() => {
-          daYingHuiZhenRef.value.daYing()
-        }, 500)
-      })
-    }
+const chaKanHuiZhenDan = (val) => {
+  getHuanZheXinXi(val.admissTimes, val.reqTimes, val.inpatientNo).then((res) => {
+    huiZhenXiangQingDuiHua.value = true
+    setTimeout(() => {
+      daYingHuiZhenRef.value.huiZhenXinXiXiangQing(res)
+    }, 100)
+  })
+}
 
-    watch(
-        () => huanZheXinXi.value,
-        () => {
-          chaKanHuiZhenShenQingClick()
-        }
-    )
+const dianJiDaYingHuiZhen = (val) => {
+  getHuanZheXinXi(val.admissTimes, val.reqTimes, val.inpatientNo).then((res) => {
+    huiZhenXiangQingDuiHua.value = true
+    setTimeout(() => {
+      daYingHuiZhenRef.value.huiZhenXinXiXiangQing(res)
+    }, 100)
+    setTimeout(() => {
+      daYingHuiZhenRef.value.daYing()
+    }, 500)
+  })
+}
 
-    onActivated(() => {
+watch(
+    () => huanZheXinXi.value,
+    () => {
       chaKanHuiZhenShenQingClick()
-    })
-
-    return {
-      tianJiaHuiZhen,
-      dianJiHuiZhenShenQing,
-      chaKanHuiZhenList,
-      chaKanHuiZhenShenQingClick,
-      shanChuHuiZhenShenQingClick,
-      hzTypeName,
-      windowSize,
-      huiZhenXiangQingDuiHua,
-      daYingHuiZhenRef,
-      chaKanHuiZhenDan,
-      dianJiDaYingHuiZhen,
-      daKaiHuiZhenShenQing,
     }
-  },
-}
+)
+
+onActivated(() => {
+  chaKanHuiZhenShenQingClick()
+})
 
 function hzTypeName(val) {
   switch (val) {
@@ -157,4 +143,6 @@ function hzTypeName(val) {
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss"></style>
+
+

src/views/reports/covid-vaccinate/CovidVaccinateAppointment.vue

@@ -1,17 +1,19 @@
 <template>
   <el-container>
-    <el-header height="36px" style="margin-top: 8px">
-      <el-input size="small" placeholder="姓名" @keyup.enter="query" v-model="queryTerm.name" clearable prefix-icon="Search" style="width: 300px">
+    <el-header height="36px">
+      <el-input size="small" placeholder="姓名" @keyup.enter="query" v-model="queryTerm.name" clearable
+                prefix-icon="Search" style="width: 300px">
         <template #prepend>姓名</template>
       </el-input>
-      <el-date-picker v-model="queryTerm.executeDate" type="date" size="small" placeholder="选择预约日期"></el-date-picker>
+      <el-date-picker v-model="queryTerm.executeDate" type="date" size="small"
+                      placeholder="选择预约日期"></el-date-picker>
       <el-button type="primary" style="margin-left: 10px" icon="Search" @click="query">查询</el-button>
       <el-button type="primary" v-show="data.list.length" icon="Download" @click="excel">导出excel</el-button>
       <el-button type="success" icon="CirclePlusOutline" @click="xinZengYiMiaoDialog = true">新增疫苗</el-button>
       <el-button type="info" icon="Tools" @click="openMaintain" style="margin-left: 10px">疫苗数据维护</el-button>
     </el-header>
     <el-main>
-      <el-table :data="data.list" :height="tableHeight" stripe highlight-current-row>
+      <el-table :data="data.list" stripe highlight-current-row>
         <el-table-column prop="patientId" width="70" label="门诊id"></el-table-column>
         <el-table-column prop="name" width="50" label="姓名"></el-table-column>
         <el-table-column width="50" label="性别" prop="sex">
@@ -33,29 +35,30 @@
       <el-dialog title="新增疫苗" v-model="xinZengYiMiaoDialog">
         <el-form label-width="100px" :rules="yiMiaoRules" ref="yiMiaoForm" :model="newVaccines">
           <el-form-item label="疫苗名称：" prop="name">
-            <el-input v-model="newVaccines.name" clearable show-word-limit maxlength="32" @blur="newVaccines.name = $event.target.value.trim()"></el-input>
+            <el-input v-model="newVaccines.name" clearable show-word-limit maxlength="32"
+                      @blur="newVaccines.name = $event.target.value.trim()"></el-input>
           </el-form-item>
           <el-form-item label="可否预约：" prop="enableFlag">
             <el-switch
-              v-model="newVaccines.enableFlag"
-              active-color="#13ce66"
-              inactive-color="#ff4949"
-              active-text="开启"
-              inactive-text="关闭"
-              :active-value="1"
-              :inactive-value="0"
+                v-model="newVaccines.enableFlag"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="开启"
+                inactive-text="关闭"
+                :active-value="1"
+                :inactive-value="0"
             >
             </el-switch>
           </el-form-item>
           <el-form-item label="预约提示：" prop="bookTip">
             <el-input
-              type="textarea"
-              clearable
-              :rows="4"
-              v-model="newVaccines.bookTip"
-              show-word-limit
-              maxlength="120"
-              @blur="newVaccines.bookTip = $event.target.value.trim()"
+                type="textarea"
+                clearable
+                :rows="4"
+                v-model="newVaccines.bookTip"
+                show-word-limit
+                maxlength="120"
+                @blur="newVaccines.bookTip = $event.target.value.trim()"
             ></el-input>
           </el-form-item>
           <el-button type="success" @click="yiMiaoFormSubmit()">保存</el-button>
@@ -65,15 +68,18 @@
       <!-- 添加疫苗厂家 -->
       <el-drawer title="添加厂家" v-model="xinZengChangJiaDrawer" size="50%" :before-close="handleClose">
         <div style="width: 80%">
-          <el-form label-width="100px" :rules="changJiaRules" :model="covidVaccinateFactory" ref="covidVaccinateFactoryForm">
+          <el-form label-width="100px" :rules="changJiaRules" :model="covidVaccinateFactory"
+                   ref="covidVaccinateFactoryForm">
             <el-form-item label="产品编码" prop="code">
               <el-input v-model="covidVaccinateFactory.code"></el-input>
             </el-form-item>
             <el-form-item label="厂家名称" prop="name">
-              <el-input v-model="covidVaccinateFactory.name" @blur="covidVaccinateFactory.name = $event.target.value.trim()"></el-input>
+              <el-input v-model="covidVaccinateFactory.name"
+                        @blur="covidVaccinateFactory.name = $event.target.value.trim()"></el-input>
             </el-form-item>
             <el-form-item label="规格" prop="specification" show-word-limit maxlength="16">
-              <el-input v-model.trim="covidVaccinateFactory.specification" @blur="covidVaccinateFactory.specification = $event.target.value.trim()"></el-input>
+              <el-input v-model.trim="covidVaccinateFactory.specification"
+                        @blur="covidVaccinateFactory.specification = $event.target.value.trim()"></el-input>
             </el-form-item>
             <el-form-item label="价格" prop="price">
               <el-input v-model="covidVaccinateFactory.price"></el-input>
@@ -81,13 +87,13 @@
 
             <el-form-item label="可否预约：" prop="enableFlag">
               <el-switch
-                v-model="covidVaccinateFactory.enableFlag"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
-                active-text="开启"
-                inactive-text="关闭"
-                :active-value="1"
-                :inactive-value="0"
+                  v-model="covidVaccinateFactory.enableFlag"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                  active-text="开启"
+                  inactive-text="关闭"
+                  :active-value="1"
+                  :inactive-value="0"
               >
               </el-switch>
             </el-form-item>
@@ -95,7 +101,7 @@
           </el-form>
         </div>
         <el-divider></el-divider>
-        <el-table :data="tableChangJia" :height="tableHeight - 350">
+        <el-table :data="tableChangJia" >
           <el-table-column label="编码" prop="code"></el-table-column>
           <el-table-column label="厂家名称" prop="name"></el-table-column>
           <el-table-column label="规格" prop="specification"></el-table-column>
@@ -111,39 +117,47 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-button type="success" style="margin-left: 20px; margin-top: 20px" v-show="tableChangJia.length > 0" @click="baoCunChangJia">保存 </el-button>
+        <el-button type="success" style="margin-left: 20px; margin-top: 20px" v-show="tableChangJia.length > 0"
+                   @click="baoCunChangJia">保存
+        </el-button>
       </el-drawer>
       <!-- 新冠疫苗数据维护 -->
-      <el-dialog title="新冠疫苗数据维护" v-model="xinGuanYiMiaoShuJuWeiHu" @close="closeXinGuanYiMiaoShuJuWeiHuDialog" fullscreen>
-        <VccntMaintain :init="initProp" />
+      <el-dialog title="新冠疫苗数据维护" v-model="xinGuanYiMiaoShuJuWeiHu" @close="closeXinGuanYiMiaoShuJuWeiHuDialog"
+                 fullscreen>
+        <VccntMaintain :init="initProp"/>
       </el-dialog>
     </el-main>
     <el-footer style="height: 40px">
       <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="queryTerm.currentPage"
-        :page-sizes="[20, 30, 40, 50, 100]"
-        :page-size="queryTerm.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="data.total"
-        style="margin-top: 5px"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="queryTerm.currentPage"
+          :page-sizes="[20, 30, 40, 50, 100]"
+          :page-size="queryTerm.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="data.total"
+          style="margin-top: 5px"
       ></el-pagination>
     </el-footer>
   </el-container>
 </template>
 
 <script>
-import { reactive, ref, unref } from '@vue/reactivity'
-import { formatDate } from '@/utils/date'
-import { queryXGYM, xinZengChangJia, xinZengYiMiao, yiJianXiuGaiRiQi } from '@/api/querydata/query-covidVaccinateAppointment'
+import {reactive, ref, unref} from '@vue/reactivity'
+import {formatDate} from '@/utils/date'
+import {
+  queryXGYM,
+  xinZengChangJia,
+  xinZengYiMiao,
+  yiJianXiuGaiRiQi
+} from '@/api/querydata/query-covidVaccinateAppointment'
 import store from '@/store'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { downloadExcel } from '@/utils/excel'
-import { computed, onMounted } from 'vue'
-import { cptSex, enableFlagToString } from '@/utils/computed'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import {downloadExcel} from '@/utils/excel'
+import {computed, onMounted} from 'vue'
+import {cptSex, enableFlagToString} from '@/utils/computed'
 import VccntMaintain from './XinGuanYiMiaoWeiHu.vue'
-import { clone } from '@/utils/clone'
+import {clone} from '@/utils/clone'
 
 export default {
   name: 'CovidVaccinateAppointment',
@@ -207,17 +221,18 @@ export default {
         return
       }
       //修改阈值
-      let list = [{ id: scope.row.id, value: value }]
+      let list = [{id: scope.row.id, value: value}]
       ElMessageBox.confirm('确认要修改日期为：<span style="color:teal">' + scope.row.date + '</span> 的阈值', '提示', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         dangerouslyUseHTMLString: true,
         type: 'info',
       })
-        .then(() => {
-          yiJianXiuGaiRiQi(list)
-        })
-        .catch(() => {})
+          .then(() => {
+            yiJianXiuGaiRiQi(list)
+          })
+          .catch(() => {
+          })
     }
     //一键修改全部的日期
     const yiJianXiuGaiRiQiValue = ref(undefined)
@@ -228,26 +243,27 @@ export default {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
       })
-        .then(() => {
-          let reg = /^[0-9]+$/
-          if (!reg.test(value)) {
-            ElMessage({
-              type: 'error',
-              message: '只能输入整数',
-              showClose: true,
-              duration: 2500,
+          .then(() => {
+            let reg = /^[0-9]+$/
+            if (!reg.test(value)) {
+              ElMessage({
+                type: 'error',
+                message: '只能输入整数',
+                showClose: true,
+                duration: 2500,
+              })
+              return
+            }
+            let list = []
+            for (let i = 0; i < yuZhiTabel.value.length; i++) {
+              list.push({id: yuZhiTabel.value[i].id, value: value})
+            }
+            yiJianXiuGaiRiQi(list).then((res) => {
+              yiJianXiuGaiRiQiValue.value = undefined
             })
-            return
-          }
-          let list = []
-          for (let i = 0; i < yuZhiTabel.value.length; i++) {
-            list.push({ id: yuZhiTabel.value[i].id, value: value })
-          }
-          yiJianXiuGaiRiQi(list).then((res) => {
-            yiJianXiuGaiRiQiValue.value = undefined
           })
-        })
-        .catch(() => {})
+          .catch(() => {
+          })
     }
 
     onMounted(() => {
@@ -270,13 +286,13 @@ export default {
         return
       }
       queryXGYM(queryTerm)
-        .then((res) => {
-          data.list = res.data
-          data.total = res.total
-        })
-        .catch(() => {
-          data.list = []
-        })
+          .then((res) => {
+            data.list = res.data
+            data.total = res.total
+          })
+          .catch(() => {
+            data.list = []
+          })
     }
     //这个是从后端导
     const excel = () => {
@@ -299,7 +315,7 @@ export default {
     /**
      * 点击新增疫苗
      */
-    //点击打开 log
+        //点击打开 log
     const xinZengYiMiaoDialog = ref(false)
 
     const yiMiaoForm = ref(null)
@@ -351,35 +367,35 @@ export default {
     }
     //疫苗的表单验证
     const yiMiaoRules = ref({
-      id: [{ required: true, message: '疫苗id不能为空', trigger: 'blur' }],
+      id: [{required: true, message: '疫苗id不能为空', trigger: 'blur'}],
       name: [
-        { required: true, message: '疫苗名称不能为空', trigger: 'blur' },
-        { min: 3, max: 32, message: '长度在 3 到 32 个字', trigger: 'blur' },
+        {required: true, message: '疫苗名称不能为空', trigger: 'blur'},
+        {min: 3, max: 32, message: '长度在 3 到 32 个字', trigger: 'blur'},
       ],
-      enableFlag: [{ required: true, message: '至少选中一项', trigger: 'blur' }],
+      enableFlag: [{required: true, message: '至少选中一项', trigger: 'blur'}],
       bookTip: [
-        { required: true, message: '不能为空', trigger: 'blur' },
-        { min: 3, max: 120, message: '长度在 3 到 120 个字', trigger: 'blur' },
+        {required: true, message: '不能为空', trigger: 'blur'},
+        {min: 3, max: 120, message: '长度在 3 到 120 个字', trigger: 'blur'},
       ],
     })
 
     //厂家的表单验证
     const changJiaRules = ref({
       price: [
-        { required: true, trigger: 'blur', message: '价格不能为空' },
+        {required: true, trigger: 'blur', message: '价格不能为空'},
         {
           pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
           message: '请输入正确的价格',
           trigger: 'blur',
         },
       ],
-      name: [{ required: true, trigger: 'blur', validator: factoryName }],
+      name: [{required: true, trigger: 'blur', validator: factoryName}],
       specification: [
-        { required: true, message: '规格不能为空', trigger: 'blur' },
-        { min: 1, max: 16, message: '规格字数在 1 ~ 16', trigger: 'blur' },
+        {required: true, message: '规格不能为空', trigger: 'blur'},
+        {min: 1, max: 16, message: '规格字数在 1 ~ 16', trigger: 'blur'},
       ],
-      code: [{ required: true, trigger: 'blur', validator: code }],
-      enableFlag: [{ required: true, message: '至少选中一项', trigger: 'blur' }],
+      code: [{required: true, trigger: 'blur', validator: code}],
+      enableFlag: [{required: true, message: '至少选中一项', trigger: 'blur'}],
     })
 
     //提交添加疫苗信息 添加成功后 打开添加厂家的 抽屉并且把这个疫苗的id 给到vaccinateId 因为这两个表是要关联的
@@ -395,14 +411,16 @@ export default {
           dangerouslyUseHTMLString: true,
           type: 'info',
         })
-          .then(() => {
-            xinZengYiMiao(newVaccines).then((res) => {
-              covidVaccinateFactory.vaccinateId = res
-              xinZengChangJiaDrawer.value = true
+            .then(() => {
+              xinZengYiMiao(newVaccines).then((res) => {
+                covidVaccinateFactory.vaccinateId = res
+                xinZengChangJiaDrawer.value = true
+              })
             })
-          })
-          .catch(() => {})
-      } catch (error) {}
+            .catch(() => {
+            })
+      } catch (error) {
+      }
     }
     //点击重置数据 一个是重置疫苗的数据 一个是重置厂家的数据
     //当重置 疫苗数据的时候需要把厂家 疫苗表的id 给清空
@@ -437,7 +455,8 @@ export default {
         await form.validate()
         tableChangJia.value.push(clone(covidVaccinateFactory))
         resetForm(covidVaccinateFactoryForm)
-      } catch (e) {}
+      } catch (e) {
+      }
     }
 
     //点击删除按钮 删除掉厂家表格中的数据 tableChangJia这个表
@@ -475,8 +494,10 @@ export default {
           confirmButtonText: '确定',
           type: 'error',
         })
-          .then(() => {})
-          .catch(() => {})
+            .then(() => {
+            })
+            .catch(() => {
+            })
       }
     }
 

vite.config.js

@@ -24,6 +24,7 @@ export default defineConfig({
     },
     resolve: {
         alias,
+        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
     },
     plugins: [
         Icons({