w-web-perm 1.0.4 → 1.0.6

package/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-app
+    <div
         v-domresize
         @domresize="resize"
     >
@@ -16,7 +16,7 @@
 
         <VeUser></VeUser>
 
-    </v-app>
+    </div>
 </template>
 
 <script>
@@ -124,14 +124,6 @@ button {
     font-family: inherit;
 }
 
-.v-application, .v-application--wrap {
-    font-family: inherit;
-}
-
-.v-chip {
-    cursor: inherit;
-}
-
 .fade-enter-active {
   animation: go 1s;
 }

package/src/components/Common/CheckYes.vue

@@ -1,14 +1,14 @@
 <template>
     <WConfirm
         :show.sync="bShow"
-        :title="'系統確認訊息'"
+        :title="$t('systemMessage')"
         :content="content"
         :_contentColor="'white'"
         :_contentIconColor="'white'"
         :_contentBackgroundColor="'orange lighten-5'"
         :headerBackgroundColor="'grey lighten-3'"
         :hasNoBtn="false"
-        :yesBtnText="'確認'"
+        :yesBtnText="$t('ok')"
         @click-yes="clickUnit()"
     ></WConfirm>
 </template>

package/src/components/Common/CheckYesNo.vue

@@ -1,15 +1,15 @@
 <template>
     <WConfirm
         :show.sync="bShow"
-        :title="'系統確認訊息'"
+        :title="$t('systemMessage')"
         :content="content"
         :_contentColor="'white'"
         :_contentIconColor="'white'"
         :_contentBackgroundColor="'orange lighten-5'"
         :_titleColor="'white'"
         :headerBackgroundColor="'grey lighten-3'"
-        :noBtnText="'取消'"
-        :yesBtnText="'確定'"
+        :noBtnText="$t('no')"
+        :yesBtnText="$t('yes')"
         @click-no="clickBtn(false)"
         @click-yes="clickBtn(true)"
     ></WConfirm>

package/src/components/Common/LoadingWinBar.vue

@@ -13,7 +13,7 @@
 
                     <span v-if="msg!==''">{{msg}}</span>
 
-                    <span v-else>處理中請稍後...</span>
+                    <span v-else>{{$t('processing')}}</span>
 
                 </div>
 

package/src/components/LayoutContent.vue

@@ -14,14 +14,13 @@
                 :drawerWidthMin="drawerWidthMin"
                 :drawerWidthMax="drawerWidthMax"
                 :mode="'from-left'"
-                :afloat="drawerAfloat"
                 :dragDrawerWidth="true"
+                :autoSwitch="true"
+                :switchWidth="drawerWidth*2.3"
             >
 
                 <template v-slot:drawer="props">
-
-                    <!-- 因drawer內部resize觸發可能不足或有容許誤差, 使用props.height可能會有多1px情形, 導致出現垂直捲軸 -->
-                    <div :style="`height:${panelHeight}px; background:#fff; position:relative;`">
+                    <div :style="`height:${props.height}px; background:#fff; position:relative;`">
 
                         <WListVertical
                             style="height:100%;"
@@ -61,17 +60,15 @@
                         </div>
 
                     </div>
-
                 </template>
 
                 <template v-slot:content="props">
-                    <!-- 因drawer內部resize觸發可能不足或有容許誤差, 使用props.height可能會有多1px情形, 導致出現垂直捲軸 -->
-                    <div :style="`height:${panelHeight}px; width:${props.width}px; position:relative;`">
+                    <div :style="`height:${props.height}px; width:${props.width}px; position:relative;`">
 
                         <template>
 
                             <LayoutContentTargets
-                                v-if="menuKey==='blocks'"
+                                v-if="menuKey==='targets'"
                             ></LayoutContentTargets>
 
                             <LayoutContentGroups
@@ -123,12 +120,9 @@
 </template>
 
 <script>
-import { mdiGamepadCircle, mdiStackOverflow, mdiAccountGroupOutline, mdiBallotRecountOutline } from '@mdi/js/mdi.js'
+import { mdiGamepadCircle, mdiStackOverflow, mdiAccountGroupOutline } from '@mdi/js/mdi.js'
 import get from 'lodash/get'
-// import map from 'lodash/map'
-// import each from 'lodash/each'
-// import cloneDeep from 'lodash/cloneDeep'
-// import pmSeries from 'wsemi/src/pmSeries.mjs'
+import find from 'lodash/find'
 import WDrawer from 'w-component-vue/src/components/WDrawer.vue'
 import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
 import WListVertical from 'w-component-vue/src/components/WListVertical.vue'
@@ -147,46 +141,16 @@ export default {
         LayoutContentUsers,
     },
     props: {
-        // menuKey: {
-        //     type: String,
-        //     default: '',
-        // },
     },
     data: function() {
-        let menus = [
-            {
-                key: 'blocks',
-                text: '管理區塊',
-                icon: mdiGamepadCircle,
-            },
-            {
-                key: 'groups',
-                text: '權限群組',
-                icon: mdiStackOverflow,
-            },
-            {
-                key: 'users',
-                text: '使用者權限',
-                icon: mdiAccountGroupOutline,
-            },
-            // {
-            //     key: 'logs',
-            //     text: '事件紀錄',
-            //     icon: mdiBallotRecountOutline,
-            // },
-        ]
         return {
 
-            menuKey: 'blocks',
-            menus,
-            menuActive: menus[0],
+            menuKey: 'targets',
 
             panelWidth: 0,
-            panelWidthTemp: 0,
             panelHeight: 0,
 
             drawer: true,
-            drawerAfloat: false,
             drawerWidth: 180,
             drawerWidthMin: 150,
             drawerWidthMax: 300,
@@ -199,6 +163,35 @@ export default {
             return get(this, '$store.state.syncState')
         },
 
+        menus: function() {
+            let vo = this
+            let ms = [
+                {
+                    key: 'targets',
+                    text: vo.$t('managementTargets'),
+                    icon: mdiGamepadCircle,
+                },
+                {
+                    key: 'groups',
+                    text: vo.$t('permissionGroups'),
+                    icon: mdiStackOverflow,
+                },
+                {
+                    key: 'users',
+                    text: vo.$t('userPermissions'),
+                    icon: mdiAccountGroupOutline,
+                },
+            ]
+            return ms
+        },
+
+        menuActive: function() {
+            let vo = this
+            let r = find(vo.menus, { key: vo.menuKey })
+            // console.log(r)
+            return r
+        },
+
     },
     methods: {
 
@@ -212,30 +205,6 @@ export default {
             vo.panelHeight = msg.snew.clientHeight
             // console.log('vo.panelHeight', vo.panelHeight)
 
-            //modeResize
-            let modeResize = '' //寬度可能相同故得有預設空字串的種類
-            if (vo.panelWidth > vo.panelWidthTemp) {
-                modeResize = 'toLarge'
-            }
-            else if (vo.panelWidth < vo.panelWidthTemp) {
-                modeResize = 'toSmall'
-            }
-            // console.log('modeResize', modeResize, vo.panelWidth, vo.panelWidthTemp)
-
-            //drawer
-            if (vo.drawer && modeResize === 'toSmall' && vo.panelWidth < 1.7 * vo.drawerWidthMax) { //已開啟抽屜且為變窄時才偵測
-                vo.drawer = false
-            }
-            else if (!vo.drawer && modeResize === 'toLarge' && vo.panelWidth >= 1.7 * vo.drawerWidthMax) { //已隱藏抽屜且為變寬時才偵測
-                vo.drawer = true
-            }
-
-            //drawerAfloat
-            vo.drawerAfloat = vo.panelWidth < 1.7 * vo.drawerWidthMax
-
-            //save
-            vo.panelWidthTemp = vo.panelWidth
-
         },
 
     }

package/src/components/LayoutContentGroups.vue

@@ -7,37 +7,35 @@
     >
 
         <div
-            style="border-bottom:1px solid #ddd;"
+            style="border-bottom:1px solid #ddd; background:#fff;"
             v-domresize
             @domresize="resizeHead"
         >
 
             <!-- 標題區 -->
-            <div style="padding:30px 25px 0px 20px; background:#fff;">
-                <div style="padding:5px 15px 5px 5px; display:inline-block; border-bottom:3px solid #FF9100;">
-                    <div style="display:flex; align-items:center;">
+            <div style="display:inline-block; vertical-align:top; padding:10px 0px 5px 20px;">
+                <div style="display:flex; align-items:center; padding:5px 15px 5px 5px; border-bottom:3px solid #FF9100;">
 
-                        <WIcon
-                            :icon="mdiStackOverflow"
-                            :color="'#FF9800'"
-                        ></WIcon>
-
-                        <div style="padding-left:10px; font-size:1.3rem; color:#d3912c;">
-                            管理權限群組
-                        </div>
+                    <WIcon
+                        :icon="mdiStackOverflow"
+                        :color="'#FF9800'"
+                    ></WIcon>
 
+                    <div style="padding-left:10px; font-size:1.3rem; color:#d3912c;">
+                        {{$t('permissionGroups')}}
                     </div>
+
                 </div>
             </div>
 
             <!-- 編輯設定區 -->
-            <div style="background:#fff;">
+            <div style="display:inline-block; vertical-align:top;">
 
-                <div style="padding:20px 20px 15px 20px; background:#fff;">
+                <div style="padding:15px 20px 15px 20px; background:#fff;">
 
                     <div style="display:flex;">
                         <WSwitch
-                            :text="'是否編輯'"
+                            :text="$t('isEditabled')"
                             :checkedSwitchCircleColor="'#D81B60'"
                             :checkedSwitchCircleColorHover="'#f26'"
                             :checkedSwitchBarColor="'#F8BBD0'"
@@ -48,43 +46,44 @@
 
                     <div style="padding-top:5px; font-size:0.8rem; _color:#f26;" v-if="isOperatable">
                         <div style="padding:3px 0px;">
-                            1. 請依照系統管理需求創建適合各類使用者適合的權限群組。
+                            1. {{$t('groupMsg1')}}
                         </div>
                         <div style="padding:3px 0px;">
-                            2. 開啟編輯時可拖曳權限群組變更其相對順序。
-                        </div>
-                        <div style="padding:3px 0px;">
-                            3. 此區域變更時將自動儲存。
+                            2. {{$t('groupMsg2')}}
                         </div>
                     </div>
 
                 </div>
 
-                <div
-                    style="padding:10px 10px 12px 10px; border-top:1px solid #F48FB1; border-bottom:1px solid #F48FB1; background:#FCE4EC; display:flex; align-items:center; justify-content:flex-end;"
-                    v-if="isModified"
-                >
-
-                    <WButtonChip
-                        :paddingStyle="{v:0,h:11}"
-                        :text="'儲存變更'"
-                        :icon="mdiCloudUploadOutline"
-                        :backgroundColor="'rgba(255,0,50,0.7)'"
-                        :backgroundColorHover="'rgba(255,0,50,0.8)'"
-                        :textColor="'#eee'"
-                        :textColorHover="'#fff'"
-                        :iconColor="'#eee'"
-                        :iconColorHover="'#fff'"
-                        @click="saveGroups"
-                    ></WButtonChip>
+            </div>
 
-                </div>
+            <!-- 儲存變更提示區 -->
+            <div
+                style="padding:10px 10px 12px 10px; border-top:1px solid #F48FB1; border-bottom:1px solid #F48FB1; background:#FCE4EC; display:flex; align-items:center; justify-content:flex-end;"
+                v-if="isModified"
+            >
+
+                <WButtonChip
+                    :paddingStyle="{v:0,h:11}"
+                    :text="$t('saveChanges')"
+                    :icon="mdiCloudUploadOutline"
+                    :backgroundColor="'rgba(255,0,50,0.7)'"
+                    :backgroundColorHover="'rgba(255,0,50,0.8)'"
+                    :textColor="'#eee'"
+                    :textColorHover="'#fff'"
+                    :iconColor="'#eee'"
+                    :iconColorHover="'#fff'"
+                    @click="saveGroups"
+                ></WButtonChip>
 
             </div>
 
         </div>
 
-        <div :style="`padding:${spacePading}px;`" v-if="!firstLoading">
+        <div
+            :style="`padding:${spacePading}px;`"
+            v-if="!firstLoading"
+        >
 
             <div style="background:#fff; box-shadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);">
 
@@ -101,8 +100,8 @@
                             :draggable="isOperatable"
                             :editableClose="isOperatable"
                             :editableInput="isOperatable"
-                            :addButtonText="'新增群組'"
-                            :addButtonTooltip="'新增權限群組'"
+                            :addButtonText="$t('addGroup')"
+                            :addButtonTooltip="$t('addPermissionGroup')"
                             :addButtonTextColor="'#eee'"
                             :addButtonTextColorHover="'#fff'"
                             :addButtonIconColor="'#eee'"
@@ -132,7 +131,7 @@
                     style="padding:20px; _color:#666; font-size:0.85rem;"
                     v-else
                 >
-                    未選擇權限群組，請點擇上方任一權限群組以顯示管理範圍。
+                    {{$t('groupMsgNoPick')}}
                 </div>
 
             </div>
@@ -140,7 +139,7 @@
         </div>
 
         <div style="padding:10px 15px; font-size:0.8rem;" v-else>
-            載入中...
+            {{$t('waitingData')}}
         </div>
 
     </div>
@@ -161,6 +160,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import genID from 'wsemi/src/genID.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import cstr from 'wsemi/src/cstr.mjs'
 import waitFun from 'wsemi/src/waitFun.mjs'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
 import WButtonChip from 'w-component-vue/src/components/WButtonChip.vue'
@@ -192,7 +192,7 @@ export default {
             groupInforHeight: 100,
 
             firstLoading: true,
-            isOperatable: false,
+            isOperatable: true,
             isModified: false,
 
             groupsTrans: [],
@@ -318,12 +318,14 @@ export default {
         getDescription: function(g) {
             // console.log('methods getDescription', g)
 
+            let vo = this
+
             //r
             let r = get(g, 'description', '')
 
             //check
             if (!isestr(r)) {
-                r = '無說明'
+                r = vo.$t('noDescription')
             }
 
             return r
@@ -365,7 +367,7 @@ export default {
                 //g
                 let g = {
                     id: genID(),
-                    name: '新權限群組',
+                    name: vo.$t('newGroup'),
                     crules: `{ "___all___": { "show": "n", "active": "n" } }`,
                     order: orderMax,
                 }
@@ -378,7 +380,7 @@ export default {
 
                 //check
                 if (errTemp !== null) {
-                    vo.$alert(`新增權限群組失敗: ${errTemp}`, { type: 'error' })
+                    vo.$alert(`${vo.$t('failedToAddPermissionGroup')}: ${errTemp}`, { type: 'error' })
                 }
 
                 //gn
@@ -392,7 +394,7 @@ export default {
                 // console.log('gn', gn)
 
                 //alert
-                vo.$alert(`新增權限群組成功`)
+                vo.$alert(vo.$t('successfulToAddPermissionGroup'))
 
             }
 
@@ -403,7 +405,7 @@ export default {
                 // })
                 .catch((err) => {
                     console.log('catch', err)
-                    vo.$alert(`發生非預期錯誤，請洽管理員`, { type: 'error' })
+                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
                 })
                 .finally(() => {
 
@@ -426,11 +428,13 @@ export default {
                 let g = get(msg, 'item', {})
 
                 //name
-                let name = get(g, 'name', '未知')
+                let name = get(g, 'name', vo.$t('unknow'))
 
                 //showCheckYesNo
                 let bExit = false
-                await vo.$dg.showCheckYesNo(`確認是否刪除權限群組「${name}」?`)
+                let t_confirmToDeletePermissionGroup = vo.$t('confirmToDeletePermissionGroup')
+                t_confirmToDeletePermissionGroup = t_confirmToDeletePermissionGroup.replace('{name}', name)
+                await vo.$dg.showCheckYesNo(t_confirmToDeletePermissionGroup)
                     .catch(() => {
                         bExit = true
                     })
@@ -449,7 +453,7 @@ export default {
 
                 //check
                 if (errTemp !== null) {
-                    vo.$alert(`刪除權限群組失敗: ${errTemp}`, { type: 'error' })
+                    vo.$alert(`${vo.$t('failedToDeletePermissionGroup')}: ${errTemp}`, { type: 'error' })
                     return
                 }
 
@@ -464,7 +468,7 @@ export default {
                 // console.log('gn', gn)
 
                 //alert
-                vo.$alert(`刪除權限群組成功`)
+                vo.$alert(vo.$t('successfulToDeletePermissionGroup'))
 
             }
 
@@ -475,7 +479,7 @@ export default {
                 // })
                 .catch((err) => {
                     console.log('catch', err)
-                    vo.$alert(`發生非預期錯誤，請洽管理員`, { type: 'error' })
+                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
                 })
                 .finally(() => {
 
@@ -522,7 +526,7 @@ export default {
 
                 //check
                 if (errTemp !== null) {
-                    vo.$alert(`變更權限群組順序失敗: ${errTemp}`, { type: 'error' })
+                    vo.$alert(`${vo.$t('failedToChangeOrderPermissionGroup')}: ${errTemp}`, { type: 'error' })
                     return
                 }
 
@@ -540,7 +544,7 @@ export default {
                 // console.log('gsn', gsn)
 
                 //alert
-                vo.$alert(`變更權限群組順序成功`)
+                vo.$alert(vo.$t('successfulToChangeOrderPermissionGroup'))
 
             }
 
@@ -551,7 +555,7 @@ export default {
                 // })
                 .catch((err) => {
                     console.log('catch', err)
-                    vo.$alert(`發生非預期錯誤，請洽管理員`, { type: 'error' })
+                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
                 })
                 .finally(() => {
 
@@ -569,7 +573,7 @@ export default {
 
             //check
             if (!isestr(group.name)) {
-                vo.$alert(`權限群組名稱請記得給予`, { type: 'warning' })
+                vo.$alert(vo.$t('rememberToGivePermissionGroupName'), { type: 'warning' })
             }
 
             //modify
@@ -597,7 +601,9 @@ export default {
                 let b = false
                 each(vo.groupsTrans, (v, k) => {
                     if (!isestr(v.name)) {
-                        vo.$alert(`第 ${k + 1} 個權限群組名稱為空`, { type: 'error' })
+                        let t_isPermissionGroupNameEmpty = vo.$t('isPermissionGroupNameEmpty')
+                        t_isPermissionGroupNameEmpty = t_isPermissionGroupNameEmpty.replace('{n}', cstr(k + 1))
+                        vo.$alert(t_isPermissionGroupNameEmpty, { type: 'error' })
                         b = true
                     }
                 })
@@ -627,7 +633,7 @@ export default {
 
                 //check
                 if (errTemp !== null) {
-                    vo.$alert(`儲存權限群組失敗: ${errTemp}`, { type: 'error' })
+                    vo.$alert(`${vo.$t('failedToSavePermissionGroup')}: ${errTemp}`, { type: 'error' })
                     return
                 }
 
@@ -635,7 +641,7 @@ export default {
                 vo.isModified = false
 
                 //alert
-                vo.$alert(`儲存權限群組成功`)
+                vo.$alert(vo.$t('successfulToSavePermissionGroup'))
 
             }
 
@@ -646,7 +652,7 @@ export default {
                 // })
                 .catch((err) => {
                     console.log('catch', err)
-                    vo.$alert(`發生非預期錯誤，請洽管理員`, { type: 'error' })
+                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
                 })
                 .finally(() => {