新增主题切换组件

src/app-register.ts

@@ -100,5 +100,7 @@ export const AppComponents = {
         v.component('app-keep-alive', AppKeepAlive);
         // 工作流审批意见控件
         v.component('app-wf-approval',() => import('@/components/app-wf-approval/app-wf-approval.vue'));
+        // 主题切换组件
+        v.component('app-mob-select-changeTheme',() => import('@/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue'));
     },
 };
\ No newline at end of file

src/components/app-mob-picker/app-mob-picker.vue

 <template>
     <div  class="app-picker">
-        <ion-input class="ibz-input" :value="refvalue"  ></ion-input>
+        <ion-input class="ibz-input" :value="refvalue"  readonly></ion-input>
         <ion-icon  v-show="refvalue" class="delete-value " name="close-circle-outline" @click="onClear"></ion-icon>
         <ion-icon  v-show="refvalue == '' || refvalue == null" class="open-picker" name="search-outline" @click="openView"></ion-icon>
     </div>

src/components/app-mob-select-changeTheme/app-mob-select-changeTheme.less

+.app-mobile-select{
+  width: 100%;
+  ion-icon{
+    position: absolute;
+    right: 15px;
+    bottom: 12px;
+    z-index: 2;
+  }
+  ion-select{
+    width: 100%;
+    max-width: 100%;
+    padding-left: 0;
+  }
+  ion-select::part(text) {
+    padding-right: 8px;
+  }
+  ion-select::part(icon) {
+    display: none;
+ 
+  }
+  .ion-select-icon{
+    right: 17px;
+    top: 50%;
+    margin-top: -3px;
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    color: currentcolor;
+    pointer-events: none;
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    color: #615e5ec4;
+  }
+}
\ No newline at end of file

src/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue

+<template>
+    <div  class="app-mobile-select"  >
+        <div  class="ion-select-icon"></div>
+        <ion-select  :value="curValue"  @ionChange="change" interface="action-sheet"  :cancel-text="$t('app.button.cancel')">
+                <ion-select-option  v-for="option of options" :key="option.value" :value="option.value" class="mob-select-text">{{option.text}}</ion-select-option>
+        </ion-select>
+      
+    </div>   
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";
+
+@Component({
+    components: {},
+})
+export default class AppSelect extends Vue {
+    /**
+     * 当前选中值
+     * @memberof AppSelect
+     */
+    get curValue(){
+        return  this.activeTheme;
+    }
+    
+    set curValue(value:any){
+        this.themeChange(value.detail.value);
+    }
+
+    public getTheme(){
+        if (this.$router.app.$store.state.selectTheme) {
+            return this.$router.app.$store.state.selectTheme;
+        } else if (localStorage.getItem('theme-class')) {
+            return localStorage.getItem('theme-class');
+        } else {
+            return 'app-dark-blue-theme';
+        }
+    }
+
+    /**
+     * change事件
+     *
+     * @memberof AppSelect
+     */
+    public change(value: any) {
+        this.themeChange(value.detail.value);
+    }
+
+    /**
+     * 下拉数据数组
+     *
+     * @type {any[]}
+     * @memberof AppSelect
+     */
+    public options: any[] = [
+        {value:"app-blue-theme",text:"dark"},
+        {value:"app-dark-blue-theme",text:"light"},
+        {value:"app-default-theme",text:"default"},
+    ];
+
+    /**
+     * mounted
+     */
+    public mounted() {
+        this.activeTheme = this.getTheme();
+    }
+
+    /**
+     * 激活主题
+     *
+     * @type {any[]}
+     * @memberof AppSelect
+     */
+    public activeTheme = "";
+
+    /**
+     * 主题变化
+     *
+     * @param {*} val
+     * @memberof AppTheme
+     */
+    public themeChange(val: any) {
+        if (!Object.is(this.activeTheme, val)) {
+            this.activeTheme = val;
+            localStorage.setItem('theme-class', val);
+            this.$router.app.$store.commit('setCurrentSelectTheme', val);
+        }
+    }
+
+}
+</script>
+
+<style lang="less">
+@import './app-mob-select-changeTheme.less';
+</style>
\ No newline at end of file