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,7 +1,6 @@
 <template>
   <fixed1920>
-    <div
-      v-loading.fullscreen.lock="loading"
+    <div v-loading.fullscreen.lock="loading"
          :element-loading-text="$t('loading')"
          :class="[
         'g-bd',
@@ -9,17 +8,15 @@
         {
           '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,6 +30,7 @@ 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 () {
@@ -56,6 +54,7 @@ export default {
     MainNavbar,
     MainContent,
     fixed1920,
+    MainThemeTools
   },
 
   watch: {