111

src/views/main-shuju/main-theme-tools.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="aui-theme-tools" v-show="false" :class="{ 'aui-theme-tools--open': isOpen }">
+    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
+      <svg class="icon-svg" aria-hidden="true">
+        <use xlink:href="#icon-setting"></use>
+      </svg>
+    </div>
+    <div class="aui-theme-tools__content">
+      <div class="aui-theme-tools__item">
+        <h3>Navbar</h3>
+        <el-checkbox
+          v-model="$store.state.navbarLayoutType"
+          true-label="colorful"
+          >colorful 鲜艳</el-checkbox
+        >
+      </div>
+      <div class="aui-theme-tools__item">
+        <h3>Sidebar</h3>
+        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
+          >dark 黑色</el-checkbox
+        >
+      </div>
+      <div class="aui-theme-tools__item">
+        <h3>Theme</h3>
+        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
+          <el-radio
+            v-for="item in themeList"
+            :key="item.name"
+            :label="item.name"
+            >{{ `${item.name} ${item.desc}` }}</el-radio
+          >
+        </el-radio-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isOpen: false,
+      themeList: require('@/element-ui/config.js'),
+      themeColor: ''
+    }
+  },
+  created() {
+    let color = window.localStorage.getItem('themeColor') || 'blue'
+    this.themeColorChangeHandle(color)
+    this.themeColor = color
+  },
+  methods: {
+    themeColorChangeHandle(val) {
+      window.localStorage.setItem('themeColor', val)
+
+      var styleList = [
+        {
+          id: 'J_elementTheme',
+          url: `${
+            process.env.BASE_URL
+          }element-theme/${val}/index.css?t=${new Date().getTime()}`
+        },
+        {
+          id: 'J_auiTheme',
+          url: `${
+            process.env.BASE_URL
+          }element-theme/${val}/aui.css?t=${new Date().getTime()}`
+        }
+      ]
+      for (var i = 0; i < styleList.length; i++) {
+        var el = document.querySelector(`#${styleList[i].id}`)
+        if (el) {
+          el.href = styleList[i].url
+          continue
+        }
+        el = document.createElement('link')
+        el.id = styleList[i].id
+        el.href = styleList[i].url
+        el.rel = 'stylesheet'
+        document.querySelector('head').appendChild(el)
+      }
+    }
+  }
+}
+</script>

src/views/main-shuju/main.vue

@@ -1,25 +1,22 @@
 <template>
   <fixed1920>
-    <div
-      v-loading.fullscreen.lock="loading"
-      :element-loading-text="$t('loading')"
-      :class="[
+    <div v-loading.fullscreen.lock="loading"
+         :element-loading-text="$t('loading')"
+         :class="[
         'g-bd',
         { 'z-sidebar--fold': $store.state.sidebarFold },
         {
           'z-sidebar--noside': true,
         },
-      ]"
-    >
+      ]">
       <template v-if="!loading">
         <main-navbar ref="ref_navbar" />
 
         <div class="g-cnt">
-          <main-content
-            v-if="!$store.state.contentIsNeedRefresh"
-            @changeCustomerName="changeCustomerName"
-          />
+          <main-content v-if="!$store.state.contentIsNeedRefresh"
+                        @changeCustomerName="changeCustomerName" />
         </div>
+        <main-theme-tools v-if="!$store.state.inIframe" />
       </template>
     </div>
   </fixed1920>
@@ -33,12 +30,13 @@ import { mapGetters } from "vuex";
 import nextTick from "dai-js/tools/nextTick";
 import { requestPost } from "@/js/dai/request";
 import fixed1920 from "@/views/components/fixed1920.vue";
+import MainThemeTools from "./main-theme-tools";
 
 export default {
-  provide() {
+  provide () {
     return {
       // 刷新
-      refresh() {
+      refresh () {
         this.$store.state.contentIsNeedRefresh = true;
         this.$nextTick(() => {
           this.$store.state.contentIsNeedRefresh = false;
@@ -46,7 +44,7 @@ export default {
       },
     };
   },
-  data() {
+  data () {
     return {
       loading: true,
       userType: localStorage.getItem("userType"),
@@ -56,12 +54,13 @@ export default {
     MainNavbar,
     MainContent,
     fixed1920,
+    MainThemeTools
   },
 
   watch: {
     $route: "routeHandle",
   },
-  async created() {
+  async created () {
     this.windowResizeHandle();
     this.routeHandle(this.$route);
     Promise.all([this.getWorkUserInfo()]).then(() => {
@@ -70,11 +69,11 @@ export default {
   },
   computed: {},
   methods: {
-    changeCustomerName(customerName) {
+    changeCustomerName (customerName) {
       this.$refs["ref_navbar"].changeCustomerName(customerName);
     },
     // 窗口改变大小
-    windowResizeHandle() {
+    windowResizeHandle () {
       this.$store.state.sidebarFold =
         document.documentElement["clientWidth"] <= 992 || false;
       window.addEventListener(
@@ -86,7 +85,7 @@ export default {
       );
     },
     // 路由, 监听
-    routeHandle(route) {
+    routeHandle (route) {
       if (!route.meta.isTab) {
         this.$store.state.mainShuju.activeName = "";
         this.$store.state.mainShuju.contentTabsActiveName = "";
@@ -112,7 +111,7 @@ export default {
     },
 
     // 获取当前管理员信息
-    async getWorkUserInfo() {
+    async getWorkUserInfo () {
       const url = "/epmetuser/customerstaff/staffbasicinfo";
       let params = {};
       const { data, code, msg } = await requestPost(url, params);