feat: 新增设备报修模块。

曹睿

12 小时以前 f36f2f20bfb06dc3ca1b69c8a6d260d09d7d70ba

 src/layout/components/Settings/index.vue

@@ -4,22 +4,58 @@
      <h3 class="drawer-title">主题风格设置</h3>

    </div>

    <div class="setting-drawer-block-checbox">

      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">

      <div

        class="setting-drawer-block-checbox-item"

        @click="handleTheme('theme-dark')"

      >

        <img src="@/assets/images/dark.svg" alt="dark" />

        <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">

        <div

          v-if="sideTheme === 'theme-dark'"

          class="setting-drawer-block-checbox-selectIcon"

          style="display: block"

        >

          <i aria-label="图标: check" class="anticon anticon-check">

            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>

              <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />

            <svg

              viewBox="64 64 896 896"

              data-icon="check"

              width="1em"

              height="1em"

              :fill="theme"

              aria-hidden="true"

              focusable="false"

              class

            >

              <path

                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"

              />

            </svg>

          </i>

        </div>

      </div>

      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">

      <div

        class="setting-drawer-block-checbox-item"

        @click="handleTheme('theme-light')"

      >

        <img src="@/assets/images/light.svg" alt="light" />

        <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">

        <div

          v-if="sideTheme === 'theme-light'"

          class="setting-drawer-block-checbox-selectIcon"

          style="display: block"

        >

          <i aria-label="图标: check" class="anticon anticon-check">

            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>

              <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />

            <svg

              viewBox="64 64 896 896"

              data-icon="check"

              width="1em"

              height="1em"

              :fill="theme"

              aria-hidden="true"

              focusable="false"

              class

            >

              <path

                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"

              />

            </svg>

          </i>

        </div>

@@ -28,7 +64,11 @@
    <div class="drawer-item">

      <span>主题颜色</span>

      <span class="comp-style">

        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange"/>

        <el-color-picker

          v-model="theme"

          :predefine="predefineColors"

          @change="themeChange"

        />

      </span>

    </div>

    <el-divider />

@@ -38,7 +78,11 @@
    <div class="drawer-item">

      <span>开启 TopNav</span>

      <span class="comp-style">

        <el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />

        <el-switch

          v-model="settingsStore.topNav"

          @change="topNavChange"

          class="drawer-switch"

        />

      </span>

    </div>



@@ -72,81 +116,93 @@


    <el-divider />



    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>

    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting"

      >保存配置</el-button

    >

    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>

  </el-drawer>



</template>



<script setup>

import variables from '@/assets/styles/variables.module.scss'

import axios from 'axios'

import { ElLoading, ElMessage } from 'element-plus'

import { useDynamicTitle } from '@/utils/dynamicTitle'

import useAppStore from '@/store/modules/app'

import useSettingsStore from '@/store/modules/settings'

import usePermissionStore from '@/store/modules/permission'

import { handleThemeStyle } from '@/utils/theme'

import variables from "@/assets/styles/variables.module.scss";

import axios from "axios";

import { ElLoading, ElMessage } from "element-plus";

import { useDynamicTitle } from "@/utils/dynamicTitle";

import useAppStore from "@/store/modules/app";

import useSettingsStore from "@/store/modules/settings";

import usePermissionStore from "@/store/modules/permission";

import { handleThemeStyle } from "@/utils/theme";



const { proxy } = getCurrentInstance()

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()

const showSettings = ref(false)

const theme = ref(settingsStore.theme)

const sideTheme = ref(settingsStore.sideTheme)

const storeSettings = computed(() => settingsStore)

const predefineColors = ref(["#800020", "#81D8D0", "#E85827", "#008C8C", "#002FA7", "#F9DC24", "#B05923", "#003153", "#8F4B28", "#4C0009"])

const { proxy } = getCurrentInstance();

const appStore = useAppStore();

const settingsStore = useSettingsStore();

const permissionStore = usePermissionStore();

const showSettings = ref(false);

const theme = ref(settingsStore.theme);

const sideTheme = ref(settingsStore.sideTheme);

const storeSettings = computed(() => settingsStore);

const predefineColors = ref([

  "#002fa7",

  "#81D8D0",

  "#E85827",

  "#008C8C",

  "#002FA7",

  "#F9DC24",

  "#B05923",

  "#003153",

  "#8F4B28",

  "#4C0009",

]);



/** 是否需要topnav */

function topNavChange(val) {

  if (!val) {

    appStore.toggleSideBarHide(false)

    permissionStore.setSidebarRouters(permissionStore.defaultRoutes)

    appStore.toggleSideBarHide(false);

    permissionStore.setSidebarRouters(permissionStore.defaultRoutes);

  }

}



function themeChange(val) {

  settingsStore.theme = val

  handleThemeStyle(val)

  settingsStore.theme = val;

  handleThemeStyle(val);

}



function handleTheme(val) {

  settingsStore.sideTheme = val

  sideTheme.value = val

  settingsStore.sideTheme = val;

  sideTheme.value = val;

}



function saveSetting() {

  proxy.$modal.loading("正在保存到本地，请稍候...")

  proxy.$modal.loading("正在保存到本地，请稍候...");

  let layoutSetting = {

    "topNav": storeSettings.value.topNav,

    "tagsView": storeSettings.value.tagsView,

    "fixedHeader": storeSettings.value.fixedHeader,

    "sidebarLogo": storeSettings.value.sidebarLogo,

    "dynamicTitle": storeSettings.value.dynamicTitle,

    "sideTheme": storeSettings.value.sideTheme,

    "theme": storeSettings.value.theme

  }

  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting))

  setTimeout(proxy.$modal.closeLoading(), 1000)

    topNav: storeSettings.value.topNav,

    tagsView: storeSettings.value.tagsView,

    fixedHeader: storeSettings.value.fixedHeader,

    sidebarLogo: storeSettings.value.sidebarLogo,

    dynamicTitle: storeSettings.value.dynamicTitle,

    sideTheme: storeSettings.value.sideTheme,

    theme: storeSettings.value.theme,

  };

  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));

  setTimeout(proxy.$modal.closeLoading(), 1000);

}



function resetSetting() {

  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...")

  localStorage.removeItem("layout-setting")

  setTimeout("window.location.reload()", 1000)

  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");

  localStorage.removeItem("layout-setting");

  setTimeout("window.location.reload()", 1000);

}



function openSetting() {

  showSettings.value = true

  showSettings.value = true;

}



defineExpose({

  openSetting

})

  openSetting,

});

</script>



<style lang='scss' scoped>

<style lang="scss" scoped>

.setting-drawer-title {

  margin-bottom: 12px;

  color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));

@@ -201,4 +257,4 @@
    margin: -3px 8px 0px 0px;

  }

}

</style>
</style>