Mauve
456 lines
14 KiB
Vue
456 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar
|
||
:safeAreaInsetTop="true"
|
||
:placeholder="true"
|
||
:title="title"
|
||
:fixed="true"
|
||
:autoBack="false"
|
||
leftIconColor="#C39A4B"
|
||
bgColor="#C39A4B"
|
||
titleStyle="font-weight:bold;color:#ffffff;"
|
||
>
|
||
<view @click="logout"
|
||
style="margin-top:2px;margin-right:3px;"
|
||
slot="right"
|
||
>
|
||
<image src="../../static/images/ico_exit.png" style="width:24px;height:24px;"></image>
|
||
</view>
|
||
</u-navbar>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;margin-top:5px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.user")}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;height:90rpx;line-height: 22px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{userName}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<!-- <view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:90rpx;line-height:90rpx;">
|
||
<u-row>
|
||
<u-col span="4" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.block")}}</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="8">
|
||
<view class="hz-flex-row">
|
||
<view class="hz-text-right hz-font-md" style="color:#666;margin-right:16rpx;width:100%;">{{userData.block}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view> -->
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;margin-top:2px">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.department")}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;height:90rpx;line-height: 22px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{userData.department}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;margin-top:2px">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.division")}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;height:90rpx;line-height: 22px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{userData.division}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;margin-top:2px">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.section")}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;height:90rpx;line-height: 22px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{userData.section}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;margin-top:2px">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.language")}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" @click="popupLang" style="margin-left:20px;margin-right:20px;height:80rpx;line-height: 27px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{lang}}</view>
|
||
<u-icon name="arrow-right" color="#666;" style="margin-left: auto;"></u-icon>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">{{$t("common.version")}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" @click="openDebugMode" style="margin-left:20px;margin-right:20px;height:80rpx;line-height: 27px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{siteData.version}}</view>
|
||
<u-icon name="arrow-right" color="#666;" style="margin-left: auto;"></u-icon>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<!-- <view v-if="show" style="margin-left:20px;margin-right:20px;border-bottom:1rpx solid #ddd;height:80rpx;line-height:90rpx;margin-top:2px">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;">Delegate Approval Request</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view v-if="show" @click="showDelegate()" style="margin-left:20px;margin-right:20px;height:80rpx;line-height: 27px;padding-top: 8px;">
|
||
<u-row>
|
||
<u-col span="12" >
|
||
<view class="hz-flex-row">
|
||
<view class="hz-font-md" style="margin-left:16rpx;color:#666;">{{userStatus}}</view>
|
||
<u-icon name="arrow-right" color="#666;" style="margin-left: auto;"></u-icon>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view> -->
|
||
<u-picker closeOnClickOverlay :show="showPicker" :defaultIndex="currentLangIndex" :columns="langList"
|
||
@close="showPicker=false" :cancelText="cancelText" :confirmText="okText" confirmColor="#C39A4B"
|
||
@cancel="showPicker=false" @confirm="confirmLang" keyName="name">
|
||
</u-picker>
|
||
<!-- <u-popup
|
||
:safeAreaInsetBottom="true"
|
||
:safeAreaInsetTop="true"
|
||
:mode="'center'"
|
||
:round="12"
|
||
:show="showMsgBox"
|
||
customStyle="width:94%; padding-top: 30px"
|
||
:closeable="!showDirBtn"
|
||
@close="closePopup()"
|
||
>
|
||
<view>
|
||
<view class="hz-flex-row" style="margin: 30px 30px;">
|
||
<view style="width: 40%;">
|
||
Status
|
||
</view>
|
||
<view style=" display: flex; align-items: center;">
|
||
<view style="margin-right: 10px; font-size: 14px; color: #333;">{{ userStatus === 'ON' ? 'ON' : 'OFF' }}</view>
|
||
<u-switch v-model="userStatus" @change="handleStatusChange"
|
||
activeValue="ON" inactiveValue="OFF" activeColor="#C39A4B" inactiveColor="#999" size="30"></u-switch>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row" style="margin: 30px 30px;width: 100%;">
|
||
<view style="width: 30%; flex-shrink: 0;">
|
||
Delegate to
|
||
</view>
|
||
<view style="margin-left: auto; flex: 1;">
|
||
<lu-data-select placeholder="Select Other Approver" :options="selectData" v-model="selectedApprover"
|
||
:multiple="false" :filterable="true" @change="onchange" style="width: 78%;" :clearable="false"></lu-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row" style="margin: 30px 30px;width: 100%;">
|
||
<view style="width: 30%; flex-shrink: 0;">
|
||
Date
|
||
</view>
|
||
<view style="width: 55%;">
|
||
<uni-datetime-picker class="delegate-data-picker" v-model="range" type="daterange" :clearIcon="false" @maskClick="maskClick" />
|
||
</view>
|
||
</view>
|
||
<view @click="saveDelegate()" class="hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center"
|
||
style="width: 90%;margin: 0 auto;margin-bottom: 15px;">
|
||
{{$t("common.confirm").toUpperCase()}}
|
||
</view>
|
||
<view @click="closePopup()" class="hz-btn hz-font-color-primary hz-font-lg hz-font-bold hz-text-center"
|
||
style="width: 90%;margin: 0 auto;margin-bottom: 30px;background-color: white;border: 0.5px solid;">
|
||
{{$t("common.cancel").toUpperCase()}}
|
||
</view>
|
||
</view>
|
||
</u-popup> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {logout} from '../../api/commonApi.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 数据变量
|
||
userData:null,
|
||
deviceData:null,
|
||
siteData:null,
|
||
langList:[
|
||
[{
|
||
name: 'English',
|
||
code: 'en'
|
||
}, {
|
||
name: '繁體中文',
|
||
code: 'zh-Hant'
|
||
}]
|
||
],
|
||
// 界面变量
|
||
show:false,
|
||
showPicker:false,
|
||
cancelText:this.$t("common.cancel"),
|
||
confirmText:this.$t("common.confirm").toUpperCase(),
|
||
okText:this.$t("common.ok"),
|
||
userName:'',
|
||
showMsgBox:false,
|
||
showDirBtn:false,
|
||
userStatus:'ON',
|
||
selectedApprover:"",
|
||
lang:',',
|
||
currentLangIndex:[0],
|
||
title: this.$t("setting.title"),
|
||
single: "2021-04-3",
|
||
today: new Date(),
|
||
range: [],
|
||
selectData:[{
|
||
value: '1',
|
||
label: 'Corso'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: 'Mauve',
|
||
},
|
||
{
|
||
value: '3',
|
||
label: 'Calmi',
|
||
}
|
||
],
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 初始化界面
|
||
//this.redirectByPermission(this.userData,false);
|
||
this.siteData = uni.getStorageSync("siteData");
|
||
this.show = true;
|
||
this.lang = this.mapLocale(uni.getLocale());
|
||
// 初始化 range 变量
|
||
this.range = [this.today, new Date(this.today.getTime() + 24 * 60 * 60 * 1000)];
|
||
},
|
||
onShow(){
|
||
//uni.setLocale("en") //測試切換語言en or zh-Hant
|
||
this.userData = uni.getStorageSync("userData");
|
||
this.userName = this.userData.userName + " (" + this.userData.userId+")";
|
||
// const userPoint = turf.point([113.560831,22.224397]);
|
||
// // console.log(userPoint,point)
|
||
// let fea = point.features
|
||
// for(let i =0;i<fea.length;i++){
|
||
// let co = fea[i];
|
||
// // console.log(co.geometry)
|
||
// for(let j = 0 ;j<co.geometry.coordinates.length;j++){
|
||
// let geo = co.geometry.coordinates[j];
|
||
// console.log(geo)
|
||
// let po = turf.polygon(geo[0]);
|
||
// // console.log(po)
|
||
// const isInside = turf.booleanPointInPolygon(userPoint, [geo]);
|
||
// console.log(isInside)
|
||
// }
|
||
// }
|
||
|
||
},
|
||
onReady(){
|
||
if (this.userData !== null && this.userData !== undefined)
|
||
this.showTabbarByPermission(this.userData);
|
||
},
|
||
methods: {
|
||
async logout(){
|
||
uni.showLoading({
|
||
title: this.$t("common.loading")
|
||
});
|
||
try{
|
||
let params = {};
|
||
const res = await logout(params);
|
||
if(res.success == true){
|
||
if(res.data !== null){
|
||
if(this.siteData.mockSSO==false&&!this.siteData.internalTag){
|
||
//this.logoutWithADFSApp()
|
||
uni.redirectTo({
|
||
url:'/pages/azureLogout/azureLogout'
|
||
});
|
||
}else{
|
||
uni.removeStorageSync("userData");
|
||
uni.removeStorageSync("token");
|
||
uni.removeStorageSync("idToken");
|
||
this.navTo('/pages/login/login',2,false);
|
||
}
|
||
}
|
||
}else{
|
||
if(this.siteData.mockSSO==false&&!this.siteData.internalTag){
|
||
//this.logoutWithADFSApp()
|
||
uni.redirectTo({
|
||
url:'/pages/azureLogout/azureLogout'
|
||
});
|
||
}else{
|
||
uni.removeStorageSync("userData");
|
||
uni.removeStorageSync("token");
|
||
uni.removeStorageSync("idToken");
|
||
this.navTo('/pages/login/login',2,false);
|
||
}
|
||
}
|
||
}catch(e){
|
||
console.error(e);
|
||
uni.$u.toast(e.errMsg,5000);
|
||
await this.writeLog(this.userData.userId,"logout","","[APP][setting.vue][logout][Catch Exception]"+e.errMsg,"","",1,false);
|
||
}finally{
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
popupLang(){
|
||
this.currentLangIndex = [];
|
||
for(let i=0;i<this.langList[0].length;i++){
|
||
if(this.langList[0][i].code === uni.getLocale()){
|
||
this.currentLangIndex.push(i);
|
||
break;
|
||
}
|
||
}
|
||
this.showPicker = true;
|
||
},
|
||
showDelegate() {
|
||
this.showMsgBox = true;
|
||
},
|
||
confirmLang(e){
|
||
uni.setLocale(e.value[0].code);
|
||
this.$i18n.locale = e.value[0].code;
|
||
this.lang = e.value[0].name;
|
||
this.title = this.$t("setting.title");
|
||
this.cancelText=this.$t("common.cancel");
|
||
this.okText=this.$t("common.ok");
|
||
// App 端 tabBar 文案不会自动跟随 i18n 刷新，需要手动更新
|
||
// #ifdef APP-PLUS
|
||
this.$nextTick(() => {
|
||
try {
|
||
// pages.json tabBar.list 顺序：
|
||
// 0 dashboard, 1 todo, 2 hotel(findPlayer), 3 calendar, 4 setting
|
||
uni.setTabBarItem({ index: 0, text: this.$t("dashboard.title") });
|
||
uni.setTabBarItem({ index: 1, text: this.$t("todo.title") });
|
||
uni.setTabBarItem({ index: 2, text: this.$t("hotel.title") });
|
||
uni.setTabBarItem({ index: 3, text: this.$t("roomCalendar.title") });
|
||
uni.setTabBarItem({ index: 4, text: this.$t("setting.title") });
|
||
} catch (err) {
|
||
// ignore
|
||
}
|
||
});
|
||
// #endif
|
||
this.showPicker = false;
|
||
},
|
||
openDebugMode(){
|
||
let count = uni.getStorageSync("countOfDebugMode");
|
||
if(count===undefined || count===''){
|
||
count = 0;
|
||
}
|
||
count++;
|
||
uni.setStorageSync("countOfDebugMode",count);
|
||
if(count === 5){
|
||
if(this.siteData.debugMode === false){
|
||
this.siteData.debugMode = true;
|
||
uni.$u.toast(this.$t("common.debugMode") + ": ON");
|
||
}
|
||
else{
|
||
this.siteData.debugMode = false;
|
||
uni.$u.toast(this.$t("common.debugMode") + ": OFF");
|
||
}
|
||
uni.setStorageSync("siteData",this.siteData);
|
||
uni.removeStorageSync("countOfDebugMode");
|
||
|
||
}
|
||
},
|
||
saveDelegate(){
|
||
this.showMsgBox = false;
|
||
},
|
||
closePopup(){
|
||
this.showMsgBox = false;
|
||
},
|
||
handleStatusChange(value){
|
||
this.userStatus = value;
|
||
},
|
||
onchange(value){
|
||
this.selectedApprover = value;
|
||
},
|
||
maskClick(){
|
||
console.log("date");
|
||
}
|
||
},
|
||
computed:{
|
||
mapLocale() {
|
||
return function (lang) {
|
||
if(lang=='zh-Hant'){
|
||
return '繁體中文';
|
||
}else{
|
||
return 'English';
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .uni-calendar__content{
|
||
bottom: 0 !important;
|
||
}
|
||
|
||
::v-deep .uni-calendar .uni-calendar__content .uni-date-changed .uni-datetime-picker--btn {
|
||
background-color: #C39A4B !important;
|
||
}
|
||
|
||
::v-deep .uni-calendar-item__weeks-box .uni-calendar-item--checked {
|
||
background-color: #C39A4B !important;
|
||
}
|
||
|
||
::v-deep .uni-calendar-item--multiple .uni-calendar-item--before-checked {
|
||
background-color: #C39A4B !important;
|
||
}
|
||
|
||
::v-deep .uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
||
background-color: #C39A4B !important;
|
||
}
|
||
</style>
|