web_dist/src/layout/function-list/Theme.vue

<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-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-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-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";

const tabsHook = {
  setItem: function (val) {
    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'])
const userConfig: Ref<SystemConfig> = ref({})

function openDrawer() {
  userConfig.value = XEUtils.clone(systemStore.userConfig, true)
  drawer.value = true
}

function saveUserConfig() {
  systemStore.postUserConfig(userConfig.value)
  drawer.value = false
}

function handelEmrfunctionButtonShowText(val) {
  if (val) {
    userConfig.value.emr_size = 'large'
  }
}

watch(() => theme.value, () => {
  const el = document.documentElement
  for (let key in theme.value) {
    el.style.setProperty(key, theme.value[key])
  }
  tabsHook.setItem(theme.value)
}, {deep: true})


onMounted(() => {
  const el = document.documentElement
  for (let key in theme.value) {
    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;
  }
}
</style>