w-web-perm 1.0.85 → 1.0.86

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

@@ -1,1157 +0,0 @@
-<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>