优化系统配置组件

package-lock.json

@@ -47,6 +47,7 @@
       },
       "devDependencies": {
         "@types/node": "20.11.0",
+        "@types/sortablejs": "^1.15.8",
         "@vitejs/plugin-vue": "5.0.4",
         "@vue/cli-service": "5.0.8",
         "@vue/compiler-sfc": "3.4.27",
@@ -3132,6 +3133,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",

package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@types/node": "20.11.0",
+    "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "5.0.4",
     "@vue/cli-service": "5.0.8",
     "@vue/compiler-sfc": "3.4.27",

src/components/med-tec-mod/HuoQuMuBan.vue

@@ -43,18 +43,10 @@
 
     <div class="layout_flex_1-y">
       <el-table
+          @rowClick="getMuBanXinXiClick"
           :data="templateData.data"
           height="100%">
-        <el-table-column label="模板名称" prop="name" width="120px">
-          <template #default="scope">
-            <el-button text
-                       @click="getMuBanXinXiClick(scope.row)"
-                       type="primary"
-                       :title="scope.row.name">
-              {{ scope.row.name }}
-            </el-button>
-          </template>
-        </el-table-column>
+        <el-table-column label="模板名称" prop="name" width="120px"/>
         <el-table-column>
           <template #header>
             <el-button type="primary" @click="reloadData">刷新</el-button>
@@ -63,13 +55,13 @@
             <el-popconfirm
                 cancel-button-text="取消"
                 confirm-button-text="确认"
-                icon="Info"
+                icon="InfoFilled"
                 iconColor="red"
                 title="是否删除该数据"
                 @confirm="shanChuMuBanClick(scope.$index, scope.row)"
             >
               <template #reference>
-                <el-button type="danger">删除</el-button>
+                <el-button @click.stop.prevent type="danger">删除</el-button>
               </template>
             </el-popconfirm>
           </template>

src/components/med-tec-mod/YiJiXiangMuLuRu.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="layout_display_flex">
     <div style="width: 195px">
-      <HuoQuMuBan ref="muBanRef" @selectionFeiYong="xuanZeXiangMuTable"></HuoQuMuBan>
+      <HuoQuMuBan
+          ref="muBanRef"
+          @selectionFeiYong="xuanZeXiangMuTable"/>
     </div>
     <div class="layout_flex_1-x layout_display_flex_y">
       <div>

src/layout/fillet-layout/ToolInfoBar.vue

@@ -14,7 +14,7 @@
         <Full-screen/>
       </div>
       <div class="function-list-item">
-        <theme/>
+        <Theme/>
       </div>
       <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px" id="tutorial_user_info">
         <user-info @password="changePassword" @logout="logout"/>
@@ -29,7 +29,7 @@ import Message from '@/layout/function-list/Message.vue'
 import FullScreen from '@/layout/function-list/Fullscreen.vue'
 import UserInfo from "@/layout/function-list/UserInfo.vue";
 import ScrollNotifications from "../HeaderV2/ScrollNotifications.vue";
-import Theme from "@/layout/function-list/Theme.vue";
+import Theme from "@/layout/function-list/system-config/index.vue";
 import changePassword from "@/components/system/password-layer";
 import router from "@/router";
 

src/layout/function-list/Theme.vue

@@ -1,234 +0,0 @@
-<template>
-  <div @click="openDrawer">
-    <div title="系统设置">
-      <i class="sfont system-shezhi"></i>
-    </div>
-    <el-drawer v-model="drawer" title="系统设置" class="system_user-config">
-      <el-form>
-        <el-collapse v-model="activeNames">
-          <el-collapse-item title="医嘱录入" name="0">
-            <el-alert
-                title="-1代表每次查询全部的医嘱"
-                style="margin-bottom: 5px"
-            />
-            <el-form-item :label="`默认查询【${userConfig.yz_orderTimeDay}】天前医嘱`">
-              <el-input-number
-                  :min="-1"
-                  v-model="userConfig.yz_orderTimeDay"/>
-            </el-form-item>
-            <el-form-item label="医嘱排序">
-              <el-select v-model="userConfig.yz_orderBySort">
-                <xc-el-option :data="[{code: 'asc' , name : '正序'},{code: 'desc' , name : '反序'}]"/>
-              </el-select>
-            </el-form-item>
-          </el-collapse-item>
-          <el-collapse-item title="系统配置" name="1">
-            <el-form-item label="布局">
-              <el-switch
-                  active-text="圆角布局"
-                  inactive-text="常见布局"
-                  active-value="filletLayout"
-                  inactive-value="defaultLayout"
-                  v-model="userConfig.layOutPageName"
-              />
-            </el-form-item>
-            <el-form-item label="侧边栏">
-              <el-switch
-                  active-text="收起"
-                  inactive-text="展开"
-                  :active-value="true"
-                  :inactive-value="false"
-                  v-model="userConfig.isCollapse"
-              />
-            </el-form-item>
-          </el-collapse-item>
-          <el-collapse-item title="电子病历" name="2">
-            <el-alert
-                title="电子病历设置完成后需要刷新电子病历页面"
-                style="margin-bottom: 5px"
-            />
-            <el-form-item label="侧边栏按钮大小">
-              <el-select v-model="userConfig.emr_size"
-                         :disabled="userConfig.emr_function_button_show_text"
-              >
-                <xc-el-option :data="[{code: 'large' , name: '大'}, {code: 'default', name: '默认'}]"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="侧边栏显示文字">
-              <el-switch
-                  @change="handelEmrfunctionButtonShowText"
-                  active-text="是"
-                  inactive-text="否"
-                  :active-value="true"
-                  :inactive-value="false"
-                  v-model="userConfig.emr_function_button_show_text"
-              >
-              </el-switch>
-            </el-form-item>
-            <el-form-item label="默认审阅模式">
-              <el-select
-                  v-model="userConfig.emr_review_mode"
-              >
-                <xc-el-option :data="[{code: 0 , name: '关闭'}, {code: 1, name: '卡片'}, {code: 2, name: '嵌入'}]"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="功能按键布局">
-              <div class="system_emr_function"
-                   ref="emrFunctionRef">
-                <div v-for="(item,index) in emrFunctionLayout"
-                     :key="`item${index}`"
-                     class="system_emr_function-item">
-                  {{ emrFunctionKey[item] }}
-                </div>
-              </div>
-            </el-form-item>
-          </el-collapse-item>
-        </el-collapse>
-      </el-form>
-
-      <template #footer>
-        <el-button size="large" type="primary" @click="saveUserConfig">保存</el-button>
-      </template>
-    </el-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {theme} from "@/theme";
-import {SystemConfig, useSystemStore} from "@/pinia/system-store";
-import XEUtils from 'xe-utils'
-import {Ref, ref} from "vue";
-import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
-// @ts-ignore
-import Sortable from 'sortablejs'
-
-const tabsHook = {
-  setItem: function (val: any) {
-    localStorage.setItem('theme', JSON.stringify(val))
-  },
-  getItem: function () {
-    return JSON.parse(localStorage.getItem('theme') || '{}')
-  },
-}
-
-const systemStore = useSystemStore()
-const drawer = ref(false)
-const activeNames = ref(['0', '1', '2'])
-// @ts-ignore
-const userConfig: Ref<SystemConfig> = ref({})
-const emrFunctionKey = {
-  "baocun": "保存",
-  "tijiao": "提交",
-  "shenhe": "审核",
-  "shanchu": "删除",
-  "huanyuan": "还原",
-  "huishouzhan": "回收站",
-  "shujutongbu": "数据同步",
-  "zancun": "暂存",
-  "chexiao": "撤销",
-  "chongzuo": "重做",
-  "shenyue": "审阅",
-  "daying": "打印",
-  "fangda": "放大",
-  "suoxiao": "缩小",
-  "bingchengjilupaixu": "排序",
-  "fenyefu": "分页符",
-  "xianshifenyefu": "显示分页",
-  "liaotianshi": "聊天室",
-  "jiesuobinglixianzhi": "解锁限制",
-  "huanzheliebiao": "患者列表"
-}
-const emrFunctionRef = ref<HTMLDivElement | null>(null)
-
-function openDrawer() {
-  userConfig.value = XEUtils.clone(systemStore.userConfig, true)
-  drawer.value = true
-  sortEmrFunction()
-}
-
-async function sortEmrFunction() {
-  await nextTick()
-  const ops = {
-    animation: 200,
-    handle: '.system_emr_function-item',
-    onEnd({newIndex, oldIndex}: { newIndex: number, oldIndex: number }) {
-      const currRow = emrFunctionLayout.value.splice(oldIndex, 1)[0];
-      emrFunctionLayout.value.splice(newIndex, 0, currRow)
-    },
-  }
-  Sortable.create(emrFunctionRef.value, ops)
-}
-
-const emrFunctionLayout = computed(() => {
-  if (drawer.value) {
-    return userConfig.value.emr_function_layout.split(",");
-  }
-  return []
-});
-
-function saveUserConfig() {
-  userConfig.value.emr_function_layout = emrFunctionLayout.value.join(",")
-  systemStore.postUserConfig(userConfig.value)
-  drawer.value = false
-}
-
-function handelEmrfunctionButtonShowText(val: boolean) {
-  if (val) {
-    userConfig.value.emr_size = 'large'
-  }
-}
-
-watch(() => theme.value, () => {
-  const el = document.documentElement
-  for (let key in theme.value) {
-    // @ts-ignore
-    el.style.setProperty(key, theme.value[key])
-  }
-  tabsHook.setItem(theme.value)
-}, {deep: true})
-
-
-onMounted(() => {
-  const el = document.documentElement
-  for (let key in theme.value) {
-    // @ts-ignore
-    el.style.setProperty(key, theme.value[key])
-  }
-  if (localStorage.getItem('theme') == null) {
-    tabsHook.setItem(theme.value)
-  } else {
-    theme.value = tabsHook.getItem()
-  }
-})
-
-</script>
-
-<style lang="scss">
-.system_user-config {
-  .el-drawer__header {
-    margin-bottom: 10px !important;
-  }
-}
-
-.system_emr_function {
-  width: 100%;
-  min-height: 200px;
-  box-shadow: var(--el-box-shadow);
-  border: 1px solid var(--el-border-color);
-  display: grid;
-  padding: 10px;
-  grid-template-columns: repeat(5, 1fr);
-  grid-column-gap: 5px;
-
-  .system_emr_function-item {
-    user-select: none;
-    text-align: center;
-    width: 100%;
-    padding: 5px;
-    border: 1px solid var(--el-border-color);
-    height: max-content;
-    cursor: all-scroll;
-  }
-}
-
-</style>

src/layout/function-list/system-config/EmrConfig.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
+import {systemConfigKey} from "@/layout/function-list/system-config/index";
+// @ts-ignore
+import Sortable from 'sortablejs';
+
+const root = inject(systemConfigKey)
+const emrFunctionRef = ref<HTMLElement>()
+const emrFunctionKey = {
+  "baocun": "保存",
+  "tijiao": "提交",
+  "shenhe": "审核",
+  "shanchu": "删除",
+  "huanyuan": "还原",
+  "huishouzhan": "回收站",
+  "shujutongbu": "数据同步",
+  "zancun": "暂存",
+  "chexiao": "撤销",
+  "chongzuo": "重做",
+  "shenyue": "审阅",
+  "daying": "打印",
+  "fangda": "放大",
+  "suoxiao": "缩小",
+  "bingchengjilupaixu": "排序",
+  "fenyefu": "分页符",
+  "xianshifenyefu": "显示分页",
+  "liaotianshi": "聊天室",
+  "jiesuobinglixianzhi": "解锁限制",
+  "huanzheliebiao": "患者列表"
+}
+
+function handelEmrfunctionButtonShowText(val: boolean) {
+  if (val) {
+    root!.userConfig.value.emr_size = 'large'
+  }
+}
+
+const emrFunctionLayout = computed(() => {
+  if (root!.drawer.value) {
+    return root!.userConfig.value.emr_function_layout.split(",");
+  }
+  return []
+});
+
+async function sortEmrFunction() {
+  await nextTick()
+  Sortable.create(emrFunctionRef.value, {
+    animation: 200,
+    handle: '.system_emr_function-item',
+    onEnd({newIndex, oldIndex}: { newIndex: number, oldIndex: number }) {
+      const currRow = emrFunctionLayout.value.splice(oldIndex, 1)[0];
+      emrFunctionLayout.value.splice(newIndex, 0, currRow)
+    },
+  })
+}
+
+onMounted(() => {
+  sortEmrFunction()
+})
+</script>
+
+<template>
+  <el-alert
+      title="电子病历设置完成后需要刷新电子病历页面"
+      style="margin-bottom: 5px"
+  />
+  <el-form-item label="侧边栏按钮大小">
+    <el-select v-model="root!.userConfig.value.emr_size"
+               :disabled="root!.userConfig.value.emr_function_button_show_text"
+    >
+      <XcElOption :data="[{code: 'large' , name: '大'}, {code: 'default', name: '默认'}]"/>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="侧边栏显示文字">
+    <el-switch
+        @change="handelEmrfunctionButtonShowText"
+        active-text="是"
+        inactive-text="否"
+        :active-value="true"
+        :inactive-value="false"
+        v-model="root!.userConfig.value.emr_function_button_show_text"
+    >
+    </el-switch>
+  </el-form-item>
+  <el-form-item label="默认审阅模式">
+    <el-select
+        v-model="root!.userConfig.value.emr_review_mode"
+    >
+      <XcElOption :data="[{code: 0 , name: '关闭'}, {code: 1, name: '卡片'}, {code: 2, name: '嵌入'}]"/>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="功能按键布局">
+    <div class="system_emr_function"
+         ref="emrFunctionRef">
+      <div v-for="(item,index) in emrFunctionLayout"
+           :key="`item${index}`"
+           class="system_emr_function-item">
+        {{ emrFunctionKey[item] }}
+      </div>
+    </div>
+  </el-form-item>
+</template>
+
+

src/layout/function-list/system-config/OrderConfig.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
+import {systemConfigKey} from "@/layout/function-list/system-config/index";
+
+const root = inject(systemConfigKey)
+
+</script>
+
+<template>
+  <el-alert
+      title="-1代表每次查询全部的医嘱"
+      style="margin-bottom: 5px"
+  />
+  <el-form-item :label="`默认查询【${root!.userConfig.value.yz_orderTimeDay}】天前医嘱`">
+    <el-input-number
+        :min="-1"
+        v-model="root!.userConfig.value.yz_orderTimeDay"/>
+  </el-form-item>
+  <el-form-item label="医嘱排序">
+    <el-select v-model="root!.userConfig.value.yz_orderBySort">
+      <xc-el-option :data="[{code: 'asc' , name : '正序'},{code: 'desc' , name : '反序'}]"/>
+    </el-select>
+  </el-form-item>
+</template>

src/layout/function-list/system-config/System.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {systemConfigKey} from "@/layout/function-list/system-config/index";
+
+const root = inject(systemConfigKey)
+</script>
+
+<template>
+  <el-form-item label="布局">
+    <el-switch
+        active-text="圆角布局"
+        inactive-text="常见布局"
+        active-value="filletLayout"
+        inactive-value="defaultLayout"
+        v-model="root!.userConfig.value.layOutPageName"
+    />
+  </el-form-item>
+  <el-form-item label="侧边栏">
+    <el-switch
+        active-text="收起"
+        inactive-text="展开"
+        :active-value="true"
+        :inactive-value="false"
+        v-model="root!.userConfig.value.isCollapse"
+    />
+  </el-form-item>
+</template>

src/layout/function-list/system-config/index.ts

@@ -0,0 +1,28 @@
+import type {InjectionKey} from "vue";
+import {SystemConfig} from "@/pinia/system-store";
+import {Ref} from "vue";
+
+export const compList: {
+    title: string,
+    comp: any
+}[] = [
+    {
+        title: '医嘱录入',
+        comp: defineAsyncComponent(() => import('./OrderConfig.vue'))
+    },
+    {
+        title: '系统配置',
+        comp: defineAsyncComponent(() => import('./System.vue'))
+    }, {
+        title: '电子病历配置',
+        comp: defineAsyncComponent(() => import('./EmrConfig.vue'))
+    }
+]
+
+interface SystemConfigKey {
+    userConfig: Ref<SystemConfig>,
+    drawer: Ref<boolean>
+}
+
+export const systemConfigKey: InjectionKey<SystemConfigKey> =
+    Symbol('systemConfigKey')

src/layout/function-list/system-config/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div @click="openDrawer">
+    <div title="系统设置">
+      <i class="sfont system-shezhi"></i>
+    </div>
+    <el-drawer v-model="drawer"
+               title="系统设置"
+               destroy-on-close
+               class="system_user-config">
+      <el-form>
+        <el-collapse v-model="activeNames">
+          <el-collapse-item v-for="(item,index) in compList"
+                            :title="item.title"
+                            :name="index"
+                            :key="`config_item-${item.title}`"
+          >
+            <Component :is="item.comp"/>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+
+      <template #footer>
+        <el-button size="large" type="primary" @click="saveUserConfig">保存</el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {theme} from "@/theme";
+import {SystemConfig, useSystemStore} from "@/pinia/system-store";
+import XEUtils from 'xe-utils'
+import {Ref, ref} from "vue";
+import {compList, systemConfigKey} from "@/layout/function-list/system-config/index";
+
+const tabsHook = {
+  setItem: function (val: any) {
+    localStorage.setItem('theme', JSON.stringify(val))
+  },
+  getItem: function () {
+    return JSON.parse(localStorage.getItem('theme') || '{}')
+  },
+}
+
+const systemStore = useSystemStore()
+const drawer = ref(false)
+const activeNames = ref(XEUtils.eachAndReturnList(compList.length, (_, index) => index))
+// @ts-ignore
+const userConfig: Ref<SystemConfig> = ref({})
+
+provide(systemConfigKey, {
+  userConfig: userConfig,
+  drawer
+})
+
+function openDrawer() {
+  userConfig.value = XEUtils.clone(systemStore.userConfig, true)
+  drawer.value = true
+}
+
+const emrFunctionLayout = computed(() => {
+  if (drawer.value) {
+    return userConfig.value.emr_function_layout.split(",");
+  }
+  return []
+});
+
+function saveUserConfig() {
+  userConfig.value.emr_function_layout = emrFunctionLayout.value.join(",")
+  systemStore.postUserConfig(userConfig.value)
+  drawer.value = false
+}
+
+
+watch(() => theme.value, () => {
+  const el = document.documentElement
+  for (let key in theme.value) {
+    // @ts-ignore
+    el.style.setProperty(key, theme.value[key])
+  }
+  tabsHook.setItem(theme.value)
+}, {deep: true})
+
+
+onMounted(() => {
+  const el = document.documentElement
+  for (let key in theme.value) {
+    // @ts-ignore
+    el.style.setProperty(key, theme.value[key])
+  }
+  if (localStorage.getItem('theme') == null) {
+    tabsHook.setItem(theme.value)
+  } else {
+    theme.value = tabsHook.getItem()
+  }
+})
+
+</script>
+
+<style lang="scss">
+.system_user-config {
+  .el-drawer__header {
+    margin-bottom: 10px !important;
+  }
+}
+
+.system_emr_function {
+  width: 100%;
+  min-height: 200px;
+  box-shadow: var(--el-box-shadow);
+  border: 1px solid var(--el-border-color);
+  display: grid;
+  padding: 10px;
+  grid-template-columns: repeat(5, 1fr);
+  grid-column-gap: 5px;
+
+  .system_emr_function-item {
+    user-select: none;
+    text-align: center;
+    width: 100%;
+    padding: 5px;
+    border: 1px solid var(--el-border-color);
+    height: max-content;
+    cursor: all-scroll;
+  }
+}
+
+</style>

src/pinia/user-store.ts

@@ -1,6 +1,7 @@
 //@ts-nocheck
 import {defineStore} from 'pinia';
 import {getUserInfoByCode} from "@/api/login";
+import {useSystemStore} from "@/pinia/system-store";
 
 export declare type UserInfo = {
     avatar: string;
@@ -57,6 +58,7 @@ export const useUserStore = defineStore('user', {
                 })
                 if (userInfo !== null) {
                     state.userInfo = userInfo
+                    useSystemStore().setConfig(userInfo.userConfigJson)
                 }
                 initUserInfo = true
             }

src/utils/createCSSSelector.js

@@ -0,0 +1,62 @@
+function createCSSSelector(selector, style) {
+    if (!document.styleSheets) return;
+    if (document.getElementsByTagName('head').length === 0) return;
+
+    var styleSheet, mediaType;
+
+    if (document.styleSheets.length > 0) {
+        for (var i = 0, l = document.styleSheets.length; i < l; i++) {
+            if (document.styleSheets[i].disabled)
+                continue;
+            var media = document.styleSheets[i].media;
+            mediaType = typeof media;
+
+            if (mediaType === 'string') {
+                if (media === '' || (media.indexOf('screen') !== -1)) {
+                    styleSheet = document.styleSheets[i];
+                }
+            } else if (mediaType === 'object') {
+                if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) {
+                    styleSheet = document.styleSheets[i];
+                }
+            }
+
+            if (typeof styleSheet !== 'undefined')
+                break;
+        }
+    }
+
+    if (typeof styleSheet === 'undefined') {
+        var styleSheetElement = document.createElement('style');
+        styleSheetElement.type = 'text/css';
+        document.getElementsByTagName('head')[0].appendChild(styleSheetElement);
+
+        for (i = 0; i < document.styleSheets.length; i++) {
+            if (document.styleSheets[i].disabled) {
+                continue;
+            }
+            styleSheet = document.styleSheets[i];
+        }
+
+        mediaType = typeof styleSheet.media;
+    }
+
+    if (mediaType === 'string') {
+        for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
+            if (styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase() === selector.toLowerCase()) {
+                styleSheet.rules[i].style.cssText = style;
+                return;
+            }
+        }
+        styleSheet.addRule(selector, style);
+    } else if (mediaType === 'object') {
+        var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
+        for (var i = 0; i < styleSheetLength; i++) {
+            if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() === selector.toLowerCase()) {
+                styleSheet.cssRules[i].style.cssText = style;
+                return;
+            }
+        }
+        styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength);
+    }
+}