w-web-perm 1.0.83 → 1.0.85

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/src/components/VeGrupBlngUsers.vue

@@ -0,0 +1,1157 @@
+<template>
+    <WDialog
+        :show.sync="bShow"
+        :title="isEditable?$t('grupBlngEditUsers'):$t('grupBlngEditUsersForDisplay')"
+        :icon="mdiFormatListCheckbox"
+        :minWidth="800"
+        :maxWidth="800"
+        :fullscreen="fullscreen"
+        :contentBackgroundColor="'#fff'"
+        :headerBtns="useHeaderBtns"
+        :hasSaveBtn="isEditable && isModified"
+        :save-btn-tooltip="$t('save')"
+        :close-btn-tooltip="$t('close')"
+        @click-btns="clickBtns"
+        @click-save="clickSave"
+        @click-close="clickClose"
+        @resize="resizeDialog"
+    >
+        <template v-slot:content>
+            <div>
+
+                <div
+                    style="_border-bottom:1px solid #ddd; background:#fff;"
+                    v-domresize
+                    @domresize="resizeHead"
+                >
+
+                    <!-- 當前權限群組名稱 -->
+                    <div style="padding:18px 12px;  background:#fff; border-bottom:1px solid #ddd;">
+
+                        <div style="font-size:0.75rem; color:#999; padding-bottom:2px;">
+                            {{$t('grupBlngGrupNow')}}
+                        </div>
+
+                        <div style="font-size:1.3rem;">
+                            {{grupName}}
+                        </div>
+
+                    </div>
+
+                    <!-- 功能區 -->
+                    <div
+                        style="padding:5px; background:#fff; display:flex; align-items:center;"
+                        v-if="isEditable"
+                    >
+
+                        <template>
+
+                            <WButtonCircle
+                                :paddingStyle="{v:6,h:6}"
+                                :tooltip="$t('checkAllYes')"
+                                :icon="mdiCheckboxMultipleMarked"
+                                :backgroundColor="'#fff'"
+                                :backgroundColorHover="'#f2f2f2'"
+                                _textColor="'#eee'"
+                                _textColorHover="'#fff'"
+                                :iconColor="'#444'"
+                                :iconColorHover="'#222'"
+                                :shadow="false"
+                                @click="showVeGrupBlngUsersToggleItemsEnableAllYes"
+                            ></WButtonCircle>
+
+                            <div style="padding-left:4px;"></div>
+
+                        </template>
+
+                        <template>
+
+                            <WButtonCircle
+                                :paddingStyle="{v:6,h:6}"
+                                :tooltip="$t('checkAllNo')"
+                                :icon="mdiCheckboxMultipleBlankOutline"
+                                :backgroundColor="'#fff'"
+                                :backgroundColorHover="'#f2f2f2'"
+                                _textColor="'#eee'"
+                                _textColorHover="'#fff'"
+                                :iconColor="'#444'"
+                                :iconColorHover="'#222'"
+                                :shadow="false"
+                                @click="showVeGrupBlngUsersToggleItemsEnableAllNo"
+                            ></WButtonCircle>
+
+                            <div style="padding-left:4px;"></div>
+
+                        </template>
+
+                        <template>
+
+                            <WButtonCircle
+                                :paddingStyle="{v:6,h:6}"
+                                :tooltip="$t('checkAllInv')"
+                                :icon="mdiCodeTagsCheck"
+                                :backgroundColor="'#fff'"
+                                :backgroundColorHover="'#f2f2f2'"
+                                _textColor="'#eee'"
+                                _textColorHover="'#fff'"
+                                :iconColor="'#444'"
+                                :iconColorHover="'#222'"
+                                :shadow="false"
+                                @click="showVeGrupBlngUsersToggleItemsEnableAllInv"
+                            ></WButtonCircle>
+
+                            <div style="padding-left:4px;"></div>
+
+                        </template>
+
+                        <template v-if="hasItemsCheck">
+
+                            <WButtonCircle
+                                :paddingStyle="{v:6,h:6}"
+                                :tooltip="$t('grupBlngDeleteCheckGrups')"
+                                :icon="mdiTrashCanOutline"
+                                :backgroundColor="'#fff'"
+                                :backgroundColorHover="'#f2f2f2'"
+                                _textColor="'#eee'"
+                                _textColorHover="'#fff'"
+                                :iconColor="'#444'"
+                                :iconColorHover="'#222'"
+                                :shadow="false"
+                                @click="deleteItemsCheck"
+                            ></WButtonCircle>
+
+                            <div style="padding-left:4px;"></div>
+
+                        </template>
+
+                    </div>
+
+                </div>
+
+                <template
+                    v-if="!firstLoading"
+                >
+
+                    <template v-if="items">
+                        <WAggridVue
+                            ref="rftable"
+                            :style="`width:100%;`"
+                            :height="contentHeight"
+                            :opt="opt"
+                        >
+                            <template v-slot:cell-render="props">
+                                <RelationChips
+                                    v-if="props.key==='grupsNames'"
+                                    :items="props.row.grups"
+                                    :editable="isEditable"
+                                    :popupTitle="$t('belongGrupsNames')"
+                                    :tooltipAll="$t('chipsShowAll')"
+                                    :labelContent="'modeSelect'"
+                                    @input="(item)=>{showVeGrupBlngUsersToggleItemModeByName(props.row.name, item)}"
+                                ></RelationChips>
+                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeGrupBlngUsersToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
+                                <span v-else>{{ props.value }}</span>
+                            </template>
+                        </WAggridVue>
+                    </template>
+
+                </template>
+
+                <div
+                    style="padding:10px 15px; font-size:0.8rem;"
+                    v-else
+                >
+                    {{$t('waitingData')}}
+                </div>
+
+            </div>
+        </template>
+    </WDialog>
+</template>
+
+<script>
+import { mdiDeleteForever, mdiFullscreen, mdiFullscreenExit, mdiFormatListCheckbox, mdiFileTree, mdiTrashCanOutline, mdiCheckboxMultipleBlankOutline, mdiCheckboxMultipleMarked, mdiCodeTagsCheck } from '@mdi/js/mdi.js'
+import Vue from 'vue'
+import JSON5 from 'json5'
+import get from 'lodash-es/get.js'
+import set from 'lodash-es/set.js'
+import each from 'lodash-es/each.js'
+import map from 'lodash-es/map.js'
+import size from 'lodash-es/size.js'
+import filter from 'lodash-es/filter.js'
+import join from 'lodash-es/join.js'
+import sortBy from 'lodash-es/sortBy.js'
+import isEqual from 'lodash-es/isEqual.js'
+import cloneDeep from 'lodash-es/cloneDeep.js'
+import genPm from 'wsemi/src/genPm.mjs'
+import haskey from 'wsemi/src/haskey.mjs'
+import delay from 'wsemi/src/delay.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import WDialog from 'w-component-vue/src/components/WDialog.vue'
+import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
+import RelationChips from './RelationChips.vue'
+
+
+export default {
+    components: {
+        WDialog,
+        WButtonCircle,
+        WAggridVue,
+        RelationChips,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            mdiDeleteForever,
+            mdiFullscreen,
+            mdiFullscreenExit,
+            mdiFormatListCheckbox,
+            mdiFileTree,
+            mdiTrashCanOutline,
+            mdiCheckboxMultipleBlankOutline,
+            mdiCheckboxMultipleMarked,
+            mdiCodeTagsCheck,
+
+            bShow: false,
+            pm: null,
+
+            fullscreen: false,
+
+            panelHeight: 100,
+            headHeight: 100,
+
+            firstLoading: true,
+            firstSetting: true,
+            isEditable: false,
+            isModified: false,
+
+            grup: null,
+
+            items: [],
+            itemsCheck: [],
+            opt: null,
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.showVeGrupBlngUsers = vo.show
+        Vue.prototype.$dg.showVeGrupBlngUsersToggleItemModeByName = vo.showVeGrupBlngUsersToggleItemModeByName
+        Vue.prototype.$dg.showVeGrupBlngUsersToggleItemEnableByName = vo.showVeGrupBlngUsersToggleItemEnableByName
+
+        //firstSetting
+        if (vo.firstSetting) {
+            // console.log('webInfor', vo.webInfor)
+
+            //會觸發數據變更再導致opt變更導致觸發rowsChange等事件, 故得要延遲, 供組件偵測初始設定數據初始化之用
+            setTimeout(() => {
+                vo.firstSetting = false
+                // console.log('firstSetting', vo.firstSetting)
+            }, 1)
+
+        }
+
+    },
+    computed: {
+
+        syncState: function() {
+            let vo = this
+            return get(vo, '$store.state.syncState')
+        },
+
+        targets: function() {
+            let rs = get(this, `$store.state.targets`)
+            rs = sortBy(rs, 'order')
+            return rs
+        },
+
+        pemis: function() {
+            let rs = get(this, `$store.state.pemis`)
+            rs = sortBy(rs, 'order')
+            return rs
+        },
+
+        grups: function() {
+            let rs = get(this, `$store.state.grups`)
+            rs = sortBy(rs, 'order')
+            return rs
+        },
+
+        users: function() {
+            let rs = get(this, `$store.state.users`)
+            rs = sortBy(rs, 'order')
+            return rs
+        },
+
+        kpHeaderBtns: function() {
+            let vo = this
+            let kp = {
+                // delete: {
+                //     icon: mdiDeleteForever,
+                //     tooltip: `${vo.$t('delete')}${vo.tableNameCht}`,
+                //     evName: 'delete'
+                // },
+                toFullscreen: {
+                    icon: mdiFullscreen,
+                    tooltip: vo.$t('screenFull'),
+                    evName: 'toFullscreen'
+                },
+                toNormalscreen: {
+                    icon: mdiFullscreenExit,
+                    tooltip: vo.$t('screenNormal'),
+                    evName: 'toNormalscreen'
+                },
+            }
+            return kp
+        },
+
+        useHeaderBtns: function() {
+            let vo = this
+            let bts = []
+            if (true) {
+                let k = vo.fullscreen ? 'toNormalscreen' : 'toFullscreen'
+                bts = [
+                    ...bts,
+                    vo.kpHeaderBtns[k]
+                ]
+            }
+            // if (vo.useDelete) {
+            //     let k = 'delete'
+            //     bts = [
+            //         ...bts,
+            //         vo.kpHeaderBtns[k]
+            //     ]
+            // }
+            return bts
+        },
+
+        contentHeight: function() {
+            let vo = this
+
+            //h
+            let h = vo.panelHeight - vo.headHeight
+            h = Math.max(h, 0)
+
+            return h
+        },
+
+        hasItemsCheck: function() {
+            let vo = this
+
+            //h
+            let b = vo.itemsCheck.length > 0
+
+            return b
+        },
+
+        grupName: function() {
+            let vo = this
+
+            let c = get(vo, 'grup.name', '')
+
+            return c
+        },
+
+    },
+    methods: {
+
+        resizeDialog: function(msg) {
+            // console.log('methods resizeDialog', msg)
+
+            let vo = this
+
+            //panelWidth, panelHeight
+            vo.panelHeight = msg.contentHeightMax
+
+        },
+
+        resizeHead: function(msg) {
+            // console.log('methods resizeHead', msg)
+
+            let vo = this
+
+            //headHeight
+            vo.headHeight = msg.snew.offsetHeight
+
+        },
+
+        genOpt: function() {
+            // console.log('methods genOpt')
+
+            let vo = this
+
+            //default
+            vo.itemsCheck = []
+
+            //opt
+            let opt = null
+            if (size(vo.items) > 0) {
+
+                //ks, 本列自己可改的(是否使用)在左, 由其他權限群組帶來的(所屬權限群組名稱)在右; 合併模式併入 grupsNames 欄之本項 chip(RelationChips), 不再獨立成欄
+                let ks = [
+                    'name',
+                    'enable',
+                    'grupsNames',
+                ]
+                // console.log('ks', ks)
+
+                //kpHead
+                let kpHead = {
+                    'name': vo.$t('userName'),
+                    'enable': vo.$t('operEnable'),
+                    'grupsNames': vo.$t('belongGrupsNames'),
+                }
+
+                //opt
+                opt = {
+                    language: vo.$t('aggridLanguage'),
+                    rows: vo.items,
+                    keys: ks,
+                    kpHead,
+                    autoFitColumn: true,
+                    defCellEditable: false, //vo.isEditable,
+                    defHeadFilter: true,
+                    defCellAlignH: 'left',
+                    kpCellEditable: {
+                        'name': vo.isEditable,
+                        'mode': false,
+                        'enable': false,
+                    },
+                    kpHeadWidth: {
+                        'enable': 100,
+                    },
+                    // kpRowDrag: {
+                    //     'name': true,
+                    // },
+                    // kpHeadFilter: {
+                    //     'enable': false,
+                    // },
+                    kpHeadFilterType: {
+                        'name': 'text',
+                        'grupsNames': 'text',
+                        'enable': 'text',
+                    },
+                    // kpHeadCheckBox: {
+                    //     'name': true,
+                    // },
+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(chip 下拉、勾選框), 不再疊儲存格焦點框
+                        'grupsNames': false,
+                        'enable': false,
+                    },
+                    rowsChange: (rs) => {
+                        // console.log('rowsChange', rs)
+                        // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
+
+                        //check
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting) {
+                            return
+                        }
+
+                        //isModified
+                        vo.isModified = true
+
+                    },
+                    rowChecked: (rs) => {
+                        // console.log('rowChecked', rs)
+                        // console.log('rowChecked cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
+
+                        //save itemsCheck
+                        vo.itemsCheck = cloneDeep(rs)
+
+                    },
+                }
+                // console.log('opt', opt)
+
+            }
+
+            //save
+            vo.opt = opt
+
+        },
+
+        deleteItemsCheck: function() {
+            // console.log('method deleteItemsCheck')
+
+            let vo = this
+
+            //check
+            if (size(vo.itemsCheck) === 0) {
+                return
+            }
+
+            //cloneDeep
+            let rows = get(vo, 'opt.rows', [])
+
+            //cloneDeep
+            rows = cloneDeep(rows)
+
+            //filter
+            each(vo.itemsCheck, (v) => {
+                // console.log('v', v)
+                let name = get(v, 'data.name', '')
+                if (!isestr(name)) {
+                    console.log(`invalid name`)
+                    return true //跳出換下一個
+                }
+                rows = filter(rows, (vv) => {
+                    return vv.name !== name
+                })
+            })
+
+            //clear
+            vo.itemsCheck = []
+
+            //save
+            vo.opt.rows = rows
+            // console.log('deleteItemsCheck cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        refresh: function() {
+            let vo = this
+
+            //cmp
+            let cmp = get(vo, '$refs.rftable')
+            // console.log('cmp', cmp)
+
+            //refresh, 因set不會觸發ag-grid重繪, 故須另外調用組件函數refresh(內為redrawRows)重繪各列, 使cell-render slot內容更新(w-aggrid-vue 2.0.56起以cell-render slot取代opt.kpCellRender)
+            cmp.refresh()
+
+        },
+
+        getDisplayData: function() {
+            let vo = this
+
+            //cmp
+            let cmp = get(vo, '$refs.rftable')
+            // console.log('cmp', cmp)
+
+            //getDisplayData
+            let rows = cmp.getDisplayData()
+
+            return rows
+        },
+
+        fltKpGrup: function(kp) {
+            // console.log('fltKpGrup', kp)
+
+            let vo = this
+
+            //_kp
+            let _kp = {}
+            each(vo.grups, (v, k) => {
+                _kp[v.name] = true
+            })
+            // console.log('_kp', _kp)
+
+            //kpt
+            let kpt = {}
+            each(kp, (v, k) => {
+                if (haskey(_kp, k)) {
+                    kpt[k] = v
+                }
+            })
+
+            return kpt
+        },
+
+        genItems: function(grup, users) {
+            // console.log('genItems', grup, users)
+
+            let vo = this
+
+            //items
+            let items = map(users, (u) => {
+
+                //kpGrup
+                let kpGrup = JSON5.parse(u.cgrups)
+                // console.log(u.name, 'kpGrup', kpGrup)
+
+                //fltKpGrup
+                kpGrup = vo.fltKpGrup(kpGrup)
+                // console.log(u.name, 'kpGrup(fltKpGrup)', kpGrup)
+
+                //mode, enable, grups
+                let mode = 'OR'
+                let enable = 'n'
+                let grups = []
+                each(kpGrup, (v, k) => {
+                    // console.log(k, 'v', v)
+
+                    //_isActive, 此為使用者cgrups內設定, 可為y或n, 僅提取y, 再判斷此使用者是否有使用此grup
+                    let _isActive = get(v, 'isActive', '')
+                    if (_isActive !== 'y') {
+                        return true //跳出換下一個
+                    }
+                    // console.log(k, '_isActive', _isActive)
+
+                    //_mode
+                    let _mode = get(v, 'mode', '')
+                    // console.log(k, '_mode', _mode)
+
+                    //b, 使用者是否擁有指定權限群組
+                    let b = k === grup.name
+                    // console.log(k, 'b', b)
+
+                    //mode, isActive
+                    if (b) {
+                        enable = 'y'
+                        mode = _mode //使用使用者給予cgrups內指定權限群組之合併權限模式
+                        // console.log('使用使用者給予cgrups內指定權限群組之合併權限模式 grup', grup)
+                    }
+
+                    //push
+                    grups.push({
+                        name: k,
+                        ...v,
+                        enable: b ? 'y' : 'n', //給render使用
+                    })
+
+                })
+                // console.log(u.name, 'grups', grups)
+
+                //grupsNames
+                let grupsNames = map(grups, 'name')
+                grupsNames = join(grupsNames, ' ')
+                // console.log(u.name, 'grupsNames', grupsNames)
+
+                return {
+                    name: u.name,
+                    grupsNames,
+                    mode,
+                    enable,
+                    // kpGrup,
+                    grups,
+                }
+            })
+            // console.log(u.name, 'items', items)
+
+            return items
+        },
+
+        revRows: function() {
+            // console.log('revRows')
+
+            let vo = this
+
+            //grup
+            let grup = cloneDeep(vo.grup)
+            // console.log('grup', grup)
+
+            //users
+            let users = cloneDeep(vo.users)
+            // console.log('users', users)
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //users
+            users = map(users, (u, ku) => {
+
+                //kpGrup
+                let kpGrup = JSON5.parse(u.cgrups)
+                // console.log(u.name, 'kpGrup', kpGrup)
+
+                //fltKpGrup
+                kpGrup = vo.fltKpGrup(kpGrup)
+                // console.log(u.name, 'kpGrup(fltKpGrup)', kpGrup)
+
+                //mode
+                let mode = get(rows, `${ku}.mode`, '')
+                if (mode !== 'OR' && mode !== 'AND') {
+                    console.log(`非預期: mode應該皆已指定不應觸發`, mode)
+                    mode = 'OR'
+                }
+                // console.log(u.name, 'mode', mode)
+
+                //enable
+                let enable = get(rows, `${ku}.enable`, '')
+                if (enable !== 'y' && enable !== 'n') {
+                    console.log(`非預期: enable應該皆已指定不應觸發`, enable)
+                    enable = 'n'
+                }
+                // console.log(u.name, 'enable', enable)
+
+                //kpGrup
+                if (enable === 'y') {
+                    kpGrup[grup.name] = {
+                        mode,
+                        isActive: 'y',
+                    }
+                }
+                else {
+                    if (haskey(kpGrup, grup.name)) {
+                        delete kpGrup[grup.name]
+                    }
+                }
+                // console.log(u.name, 'kpGrup', kpGrup)
+
+                //update cgrups
+                let cgrups = JSON.stringify(kpGrup)
+                u.cgrups = cgrups
+                // console.log(u.name, 'cgrups', cgrups)
+
+                return u
+            })
+
+            //items
+            let items = vo.genItems(grup, users)
+            // console.log('items', items)
+
+            //update grupsNames, grups
+            each(items, (r, kr) => {
+                // name: u.name,
+                // grupsNames,
+                // mode,
+                // enable,
+                // grups,
+
+                //set
+                set(vo, `opt.rows[${kr}].grupsNames`, r.grupsNames)
+                set(vo, `opt.rows[${kr}].grups`, r.grups)
+                // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            })
+
+            //refresh
+            vo.refresh()
+
+        },
+
+        showVeGrupBlngUsersToggleItemModeByName: function(name, mode) {
+            // console.log('showVeGrupBlngUsersToggleItemModeByName', name, mode)
+
+            let vo = this
+
+            //check
+            if (!isestr(name)) {
+                vo.$alert(`${vo.$t('grupBlngEditNoGrupName')}`, { type: 'error' })
+                return
+            }
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+
+            //find
+            let r = null
+            let kr = null
+            each(rows, (v, k) => {
+                if (get(v, 'name', '') === name) {
+                    r = v
+                    kr = k
+                    return false //跳出
+                }
+            })
+
+            //check
+            if (!iseobj(r)) {
+                vo.$alert(`${vo.$t('grupBlngEditNoGrupData')}`, { type: 'error' })
+                return
+            }
+
+            //mode
+            // let mode = th.value
+            // console.log('mode', mode)
+
+            //set
+            set(vo, `opt.rows[${kr}].mode`, mode)
+            // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            //revRows, 已含refresh
+            vo.revRows()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        showVeGrupBlngUsersToggleItemEnableByName: function(name) {
+            // console.log('showVeGrupBlngUsersToggleItemEnableByName', name)
+
+            let vo = this
+
+            //check
+            if (!isestr(name)) {
+                vo.$alert(`${vo.$t('grupBlngEditNoGrupName')}`, { type: 'error' })
+                return
+            }
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+
+            //find
+            let r = null
+            let kr = null
+            each(rows, (v, k) => {
+                if (get(v, 'name', '') === name) {
+                    r = v
+                    kr = k
+                    return false //跳出
+                }
+            })
+
+            //check
+            if (!iseobj(r)) {
+                vo.$alert(`${vo.$t('grupBlngEditNoGrupData')}`, { type: 'error' })
+                return
+            }
+
+            //enable
+            let _enable = get(r, 'enable', 'n')
+            let enable = _enable === 'y' ? 'n' : 'y'
+            // console.log('enable', enable)
+
+            //set
+            set(vo, `opt.rows[${kr}].enable`, enable)
+            // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            //revRows, 已含refresh
+            vo.revRows()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        showVeGrupBlngUsersToggleItemsEnableAllYes: function() {
+            // console.log('showVeGrupBlngUsersToggleItemsEnableAllYes')
+
+            let vo = this
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //kpRow
+            let kpRow = {}
+            each(rows, (r, kr) => {
+                kpRow[r.name] = kr
+            })
+
+            //rowsEff
+            let rowsEff = vo.getDisplayData()
+            // console.log('rowsEff', rowsEff)
+
+            //toggle
+            each(rowsEff, (r) => {
+
+                //kr
+                let kr = kpRow[r.name]
+
+                //set
+                set(vo, `opt.rows[${kr}].enable`, 'y')
+                // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            })
+
+            //revRows, 已含refresh
+            vo.revRows()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        showVeGrupBlngUsersToggleItemsEnableAllNo: function() {
+            // console.log('showVeGrupBlngUsersToggleItemsEnableAllNo')
+
+            let vo = this
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //kpRow
+            let kpRow = {}
+            each(rows, (r, kr) => {
+                kpRow[r.name] = kr
+            })
+
+            //rowsEff
+            let rowsEff = vo.getDisplayData()
+            // console.log('rowsEff', rowsEff)
+
+            //toggle
+            each(rowsEff, (r) => {
+
+                //kr
+                let kr = kpRow[r.name]
+
+                //set
+                set(vo, `opt.rows[${kr}].enable`, 'n')
+                // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            })
+
+            //revRows, 已含refresh
+            vo.revRows()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        showVeGrupBlngUsersToggleItemsEnableAllInv: function() {
+            // console.log('showVeGrupBlngUsersToggleItemsEnableAllInv')
+
+            let vo = this
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //kpRow
+            let kpRow = {}
+            each(rows, (r, kr) => {
+                kpRow[r.name] = kr
+            })
+
+            //rowsEff
+            let rowsEff = vo.getDisplayData()
+            // console.log('rowsEff', rowsEff)
+
+            //toggle
+            each(rowsEff, (r) => {
+
+                //kr
+                let kr = kpRow[r.name]
+
+                //enable
+                let _enable = get(r, 'enable', 'n')
+                let enable = _enable === 'y' ? 'n' : 'y'
+
+                //set
+                set(vo, `opt.rows[${kr}].enable`, enable)
+                // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            })
+
+            //revRows, 已含refresh
+            vo.revRows()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        saveUsers: async function(rows) {
+            // console.log('method saveUsers', rows)
+
+            let vo = this
+
+            //3) updateUsers, 各自 catch + okX 旗標短路 (canonical 五段結構; 空清單檢查已上移至 doSave core())
+            let okSave = false
+            await vo.$fapi.updateUsers(rows)
+                .then(() => { okSave = true })
+                .catch(async (err) => {
+                    vo.$ui.updateLoading(false) //showCheckYes 前關 loading（modal 阻斷期間避免 loading 疊在底下）
+                    await vo.$dg.showCheckYes(`${vo.$t('userSaveUsersFail')}: ${vo.$tErr(err)}`)
+                })
+            if (!okSave) {
+                return
+            }
+
+            //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
+            vo.$ui.updateLoading(false)
+            await vo.$dg.showCheckYes(vo.$t('userSaveUsersSuccess'), { type: 'success' })
+
+        },
+
+        clickBtns: function(msg) {
+            // console.log('clickBtns', msg)
+
+            let vo = this
+
+            //evName
+            if (msg.evName === 'toFullscreen') {
+                vo.fullscreen = true
+            }
+            else if (msg.evName === 'toNormalscreen') {
+                vo.fullscreen = false
+            }
+
+        },
+
+        clickSave: function(msg) {
+            //console.log('methods clickSave', msg)
+
+            let vo = this
+
+            //save按鈕第一行立刻釋放視覺鎖
+            msg.pm.resolve()
+
+            //fire-and-forget, 不 await
+            vo.doSave()
+
+        },
+
+        doSave: function() {
+
+            let vo = this
+
+            async function core() {
+
+                //1) 事先檢測 (所有同步檢查在開 loading 之前, 空清單不應先閃 loading)
+                let rows = get(vo, 'opt.rows', [])
+                // console.log('rows', rows)
+                if (size(rows) === 0) {
+                    await vo.$dg.showCheckYes(`${vo.$t('userSaveUsersEmpty')}`)
+                    return
+                }
+
+                //2) 確定打 API 才開 loading
+                vo.$ui.updateLoading(true)
+
+                //delay
+                await delay(300)
+
+                //users
+                let users = cloneDeep(vo.users)
+                // console.log('users', users)
+
+                //usersNew
+                let usersNew = map(rows, (r, kr) => {
+
+                    //u
+                    let u = get(users, kr, {})
+
+                    //cgrups
+                    let cgrups = get(u, 'cgrups', '')
+
+                    //kpGrup
+                    let kpGrup = JSON5.parse(cgrups)
+                    // console.log('kpGrup', kpGrup)
+
+                    //grups
+                    let grups = get(r, 'grups', [])
+
+                    //kpGrupNew
+                    let kpGrupNew = {}
+                    if (true) {
+                        each(grups, (g) => {
+                            if (g.isActive === 'y') {
+                                kpGrupNew[g.name] = {
+                                    mode: g.mode,
+                                    isActive: g.isActive,
+                                }
+                            }
+                        })
+                    }
+
+                    //check
+                    if (!isEqual(kpGrup, kpGrupNew)) {
+
+                        //cgrups
+                        u.cgrups = JSON.stringify(kpGrupNew)
+
+                    }
+
+                    return u
+                })
+                console.log('usersNew', usersNew)
+
+                // //check
+                // if (size(usersNew) === 0) {
+                //     return
+                // }
+
+                //saveUsers
+                await vo.saveUsers(usersNew)
+
+            }
+
+            //core
+            core()
+                .then((rows) => {
+
+                    //resolve
+                    vo.pm.resolve(rows)
+
+                    //hide
+                    vo.bShow = false
+
+                })
+                .catch((err) => {
+                    console.log('doSave', err)
+                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' }) //§5.1: 非預期例外須告知, 不靜默吞 (失敗時 .then 不執行→視窗不關)
+                })
+                .finally(() => {
+
+                    //hide loading
+                    vo.$ui.updateLoading(false)
+
+                })
+
+        },
+
+        clickClose: function() {
+            //console.log('methods clickClose')
+
+            let vo = this
+
+            //reject
+            vo.pm.reject('close window')
+
+            //hide
+            vo.bShow = false
+
+        },
+
+        show: function (msg) {
+            // console.log('methods show', msg)
+
+            let vo = this
+
+            //pm
+            vo.pm = genPm()
+
+            //default
+            vo.isModified = false
+
+            //isEditable, grup
+            let isEditable = get(msg, 'isEditable', false)
+            let grup = get(msg, 'grup', {})
+
+            //grup
+            grup = cloneDeep(grup)
+
+            //users
+            let users = cloneDeep(vo.users)
+
+            //items
+            let items = vo.genItems(grup, users)
+
+            //save
+            vo.isEditable = isEditable
+            vo.grup = grup
+            vo.items = items
+
+            //genOpt
+            vo.genOpt()
+
+            //firstLoading
+            vo.firstLoading = false
+
+            //bShow
+            vo.bShow = true
+
+            return vo.pm
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>