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/LayoutContentGrups.vue

@@ -1,1260 +0,0 @@
-<template>
-    <div
-        style="height:100%;"
-        v-domresize
-        @domresize="resizePanel"
-        :changeParams="changeParams"
-    >
-
-        <div
-            style="_border-bottom:1px solid #ddd; background:#fff;"
-            v-domresize
-            @domresize="resizeHead"
-        >
-
-            <!-- 標題區 -->
-            <div style="padding:10px 10px 10px 20px;">
-                <div :style="`display:flex; align-items:center; padding:${drawer?'5px':'5px 5px 5px 20px'};`">
-
-                    <WIcon
-                        :icon="mdiSelectGroup"
-                        :color="'#000'"
-                        :size="32"
-                    ></WIcon>
-
-                    <div style="padding-left:12px;">
-
-                        <div style="font-size:1.4rem; color:#000;">
-                            {{$t('mmGrups')}}
-                        </div>
-
-                        <div style="padding-top:2px; font-size:0.8rem; color:#666;">
-                            {{$t('mmGrupsMsg')}}
-                        </div>
-
-                    </div>
-
-                </div>
-            </div>
-
-            <!-- 功能區 -->
-            <div
-                data-fmid="grups-toolbar"
-                style="padding:5px; border-top:1px solid #ddd; display:flex; align-items:center;"
-                _v-if="showIsEditable || isEditable"
-            >
-
-                <template v-if="showIsEditable">
-
-                    <div style="padding:6px 0px 4px 4px;">
-                        <WSwitch
-                            :checkedSwitchCircleColor="'#F68200'"
-                            :checkedSwitchCircleColorHover="'#FB8C00'"
-                            :checkedSwitchBarColor="'#FFE0B2'"
-                            :checkedSwitchBarColorHover="'#FFE6B8'"
-                            v-model="isEditable"
-                            :text="$t('modeEdit')"
-                        ></WSwitch>
-                    </div>
-
-                    <div style="padding-left:10px;"></div>
-
-                </template>
-
-                <template v-if="true">
-
-                    <WPopup
-                        :isolated="true"
-                        _show=""
-                        _hide=""
-                    >
-                        <template v-slot:trigger>
-                            <WButtonCircle
-                                :paddingStyle="{v:6,h:6}"
-                                :tooltip="$t('showTabCols')"
-                                :icon="mdiTableHeadersEye"
-                                :backgroundColor="'#fff'"
-                                :backgroundColorHover="'#f2f2f2'"
-                                _textColor="'#eee'"
-                                _textColorHover="'#fff'"
-                                :iconColor="'#444'"
-                                :iconColorHover="'#222'"
-                                :shadow="false"
-                                _click=""
-                            ></WButtonCircle>
-                        </template>
-
-                        <template v-slot:content>
-                            <div style="padding:10px 0px 10px 0px;">
-
-                                <div style="padding:7px 10px; font-size:0.85rem; color:#222; background:#f2f2f2;">
-                                    {{$t('showTabCols')}}
-                                </div>
-
-                                <div style="padding:7px 9px 0px 7px;">
-                                    <WInputCheckbox
-                                        :items="tabKeysPick"
-                                        v-model="tabKeysShow"
-                                        @input="toggleTabKeys"
-                                    >
-                                        <template v-slot="props">
-                                            <div style="padding-left:3px; display:flex; align-items:center; font-size:0.85rem; height:24px; cursor:pointer;">
-                                                {{getHead(props.item.data)}}
-                                            </div>
-                                        </template>
-                                    </WInputCheckbox>
-                                </div>
-
-                            </div>
-                        </template>
-                    </WPopup>
-
-                    <div style="padding-left:4px;"></div>
-
-                </template>
-
-                <template v-if="isEditable">
-
-                    <WButtonCircle
-                        :paddingStyle="{v:6,h:6}"
-                        :tooltip="$t('grupAdd')"
-                        :icon="mdiPlus"
-                        :backgroundColor="'#fff'"
-                        :backgroundColorHover="'#f2f2f2'"
-                        _textColor="'#eee'"
-                        _textColorHover="'#fff'"
-                        :iconColor="'#444'"
-                        :iconColorHover="'#222'"
-                        :shadow="false"
-                        @click="addItem"
-                    ></WButtonCircle>
-
-                    <div style="padding-left:4px;"></div>
-
-                </template>
-
-                <template v-if="isEditable && hasItemCheckOne">
-
-                    <WButtonCircle
-                        :paddingStyle="{v:6,h:6}"
-                        :tooltip="$t('grupCopy')"
-                        :icon="mdiContentCopy"
-                        :backgroundColor="'#fff'"
-                        :backgroundColorHover="'#f2f2f2'"
-                        _textColor="'#eee'"
-                        _textColorHover="'#fff'"
-                        :iconColor="'#444'"
-                        :iconColorHover="'#222'"
-                        :shadow="false"
-                        @click="copyItem"
-                    ></WButtonCircle>
-
-                    <div style="padding-left:4px;"></div>
-
-                </template>
-
-                <template v-if="isEditable && hasItemsCheck">
-
-                    <WButtonCircle
-                        :paddingStyle="{v:6,h:6}"
-                        :tooltip="$t('grupDeleteCheckGrups')"
-                        :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>
-
-                <template v-if="isEditable && isModified">
-
-                    <WButtonCircle
-                        :paddingStyle="{v:6,h:6}"
-                        :tooltip="$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'"
-                        :shadow="false"
-                        :promiseUnlock="true"
-                        @click="saveGrups"
-                    ></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">
-                        <template v-if="props.key==='name'">
-                            <span v-if="errItemsByName[props.value]" :title="errItemsByName[props.value]">
-                                <span style="color:#F57C00;">{{ props.value }}</span>
-                                <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
-                            </span>
-                            <span v-else>{{ props.value }}</span>
-                        </template>
-                        <template v-else-if="props.key==='belongUsers'">
-                            <div @click.stop.prevent @mousedown.stop.prevent>
-                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeGrupBlngUsersById(props.row.id)">{{ props.value }}</button>
-                            </div>
-                        </template>
-                        <template v-else-if="props.key==='cpemis'">
-                            <div @click.stop.prevent @mousedown.stop.prevent>
-                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeCpemisById(props.row.id)">{{ getCpemisText(props.value) }}</button>
-                            </div>
-                        </template>
-                        <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>
-
-<script>
-import { mdiSelectGroup, mdiVectorPolylinePlus, mdiCheckboxMarkedCircle, mdiCloudUploadOutline, mdiTrashCanOutline, mdiTableHeadersEye, mdiPlus, mdiPencilOutline, mdiContentCopy } from '@mdi/js/mdi.js'
-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 sortBy from 'lodash-es/sortBy.js'
-import cloneDeep from 'lodash-es/cloneDeep.js'
-import haskey from 'wsemi/src/haskey.mjs'
-import isestr from 'wsemi/src/isestr.mjs'
-import iseobj from 'wsemi/src/iseobj.mjs'
-import isnum from 'wsemi/src/isnum.mjs'
-import cdbl from 'wsemi/src/cdbl.mjs'
-import arrPull from 'wsemi/src/arrPull.mjs'
-import WIcon from 'w-component-vue/src/components/WIcon.vue'
-import WSwitch from 'w-component-vue/src/components/WSwitch.vue'
-import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
-import WPopup from 'w-component-vue/src/components/WPopup.vue'
-import WInputCheckbox from 'w-component-vue/src/components/WInputCheckbox.vue'
-import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
-
-
-export default {
-    components: {
-        WIcon,
-        WSwitch,
-        WButtonCircle,
-        WPopup,
-        WInputCheckbox,
-        WAggridVue,
-    },
-    props: {
-        drawer: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data: function() {
-        return {
-            mdiSelectGroup,
-            mdiVectorPolylinePlus,
-            mdiCheckboxMarkedCircle,
-            mdiCloudUploadOutline,
-            mdiTrashCanOutline,
-            mdiTableHeadersEye,
-            mdiPlus,
-            mdiPencilOutline,
-            mdiContentCopy,
-
-            panelHeight: 100,
-            headHeight: 100,
-
-            firstLoading: true,
-            firstSetting: true,
-            systemProcing: false, //程式端載入/重載清單資料期間為 true, 用於排除非使用者操作之 rowsChange (見 $ui.markDataReload)
-            showIsEditable: false,
-            isEditable: false,
-            isModified: false,
-
-            tabKeys: [ //關聯欄之欄序: 本項自己管控的(管控使用權限)在左, 由上層帶過來的(管控所屬使用者)在右
-                'id',
-                'name',
-                'description',
-                'from',
-                'cpemis',
-                'belongUsers',
-                'userId',
-                'timeCreate',
-                'userIdUpdate',
-                'timeUpdate',
-            ],
-            tabKeysPick: [
-                'name',
-                'description',
-                'from',
-                'cpemis',
-                'belongUsers',
-                'userId',
-                'timeCreate',
-                'userIdUpdate',
-                'timeUpdate',
-            ],
-            tabKeysShow: [
-                'name',
-                'description',
-                // 'from',
-                'cpemis',
-                'belongUsers',
-                // 'userId',
-                // 'timeCreate',
-                // 'userIdUpdate',
-                // 'timeUpdate',
-            ],
-
-            widthGrupsName: null,
-            widthGrupsDescription: null,
-
-            items: [],
-            itemsCheck: [],
-            opt: null,
-
-        }
-    },
-    mounted: function() {
-        // console.log('mounted')
-
-        let vo = this
-
-        //註冊至$dg供使用
-        vo.$dg.showVeGrupBlngUsersById = vo.showVeGrupBlngUsersById
-        vo.$dg.showVeCpemisById = vo.showVeCpemisById
-
-        //firstSetting
-        if (vo.firstSetting) {
-            // console.log('webInfor', vo.webInfor)
-
-            let showModeEditGrups = get(vo, 'webInfor.showModeEditGrups', '')
-            vo.showIsEditable = showModeEditGrups === 'y'
-            let modeEditGrups = get(vo, 'webInfor.modeEditGrups', '')
-            vo.isEditable = modeEditGrups === 'y'
-
-            vo.widthGrupsName = get(vo, 'webInfor.widthGrupsName', '')
-            vo.widthGrupsDescription = get(vo, 'webInfor.widthGrupsDescription', '')
-
-            //會觸發數據變更再導致opt變更導致觸發rowsChange等事件, 故得要延遲, 供組件偵測初始設定數據初始化之用
-            setTimeout(() => {
-                vo.firstSetting = false
-                // console.log('firstSetting', vo.firstSetting)
-            }, 1)
-
-        }
-
-    },
-    computed: {
-
-        syncState: function() {
-            let vo = this
-            return get(vo, '$store.state.syncState')
-        },
-
-        webInfor: function() {
-            let wi = get(this, `$store.state.webInfor`)
-            return wi
-        },
-
-        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
-        },
-
-        useUsers: function() {
-            let vo = this
-
-            //parse cgrups
-            let users = map(vo.users, (u) => {
-
-                //cloneDeep
-                u = cloneDeep(u)
-
-                //kpGrup
-                let kpGrup = {}
-                try {
-                    // console.log('u.cgrups', u.cgrups)
-                    kpGrup = JSON5.parse(u.cgrups)
-                }
-                catch (err) {}
-
-                //save kpGrup
-                u.kpGrup = kpGrup
-
-                return u
-            })
-            // console.log('users', users)
-
-            return users
-        },
-
-        kpGrupUser: function() {
-            let vo = this
-
-            //kp
-            let kp = {}
-            each(vo.useUsers, (u) => {
-                each(u.kpGrup, (v, k) => {
-                    let isActive = get(v, 'isActive', '')
-                    if (isActive !== 'y') {
-                        return true //跳出換下一個
-                    }
-                    if (!haskey(kp, k)) {
-                        kp[k] = []
-                    }
-                    kp[k].push({
-                        user: u,
-                        grup: v,
-                    })
-                })
-            })
-            // console.log('kp', kp)
-
-            return kp
-        },
-
-        kpUseGrupUser: function() {
-            let vo = this
-
-            //_kp
-            let _kp = {}
-            each(vo.grups, (v, k) => {
-                _kp[v.name] = true
-            })
-            // console.log('_kp', _kp)
-
-            //kp
-            let kp = {}
-            each(vo.kpGrupUser, (v, k) => {
-                if (haskey(_kp, k)) {
-                    kp[k] = v
-                }
-            })
-            // console.log('kp', kp)
-
-            return kp
-        },
-
-        changeParams: function() {
-            // console.log('computed changeParams')
-
-            let vo = this
-
-            //trigger
-            let isEditable = vo.isEditable
-            let grups = cloneDeep(vo.grups)
-            let kpUseGrupUser = cloneDeep(vo.kpUseGrupUser)
-
-            //items
-            let items = vo.genItems(grups, kpUseGrupUser)
-
-            //save
-            vo.items = items
-
-            //genOpt
-            vo.genOpt({ isEditable })
-
-            //firstLoading
-            vo.firstLoading = false
-
-            return ''
-        },
-
-        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 = size(vo.itemsCheck) > 0
-
-            return b
-        },
-
-        hasItemCheckOne: function() {
-            let vo = this
-
-            //h
-            let b = size(vo.itemsCheck) === 1
-
-            return b
-        },
-
-        errItemsByName: function() {
-            let vo = this
-
-            //rows
-            let rows = get(vo, 'opt.rows', [])
-
-            //kpErr
-            let kpErr = {}
-            let kpName = {}
-            each(rows, (v, k) => {
-
-                //name
-                let name = get(v, 'name', '')
-
-                //check
-                if (!isestr(name)) {
-
-                    //kpErr
-                    kpErr[name] = vo.$t(`grupNameEmpty`)
-
-                    return true //跳出換下一個
-                }
-
-                //check
-                if (haskey(kpName, name)) {
-
-                    //kpErr
-                    kpErr[name] = vo.$t(`grupNameDuplicate`)
-
-                    return true //跳出換下一個
-                }
-
-                //kpName
-                kpName[name] = true
-
-            })
-
-            return kpErr
-        },
-
-        isError: function() {
-            let vo = this
-
-            let c = ''
-            let b = false
-            b = iseobj(vo.errItemsByName)
-            if (b) {
-                c = vo.$t('errInNames')
-            }
-
-            return c
-        },
-
-        kpHead: function() {
-            let vo = this
-
-            let kp = {
-                'id': vo.$t('id'),
-                'name': vo.$t('name'),
-                'description': vo.$t('description'),
-                'from': vo.$t('from'),
-                'belongUsers': vo.$t('belongUsers'),
-                'cpemis': vo.$t('grupCpemis'),
-                'userId': vo.$t('userId'),
-                'timeCreate': vo.$t('timeCreate'),
-                'userIdUpdate': vo.$t('userIdUpdate'),
-                'timeUpdate': vo.$t('timeUpdate'),
-            }
-
-            return kp
-        },
-
-    },
-    methods: {
-
-        resizePanel: function(msg) {
-            // console.log('methods resizePanel', msg)
-
-            let vo = this
-
-            //panelWidth, panelHeight
-            vo.panelHeight = msg.snew.offsetHeight
-
-        },
-
-        resizeHead: function(msg) {
-            // console.log('methods resizeHead', msg)
-
-            let vo = this
-
-            //headHeight
-            vo.headHeight = msg.snew.offsetHeight
-
-        },
-
-        getHead: function(key) {
-            // console.log('methods getHead', key)
-
-            let vo = this
-
-            let head = get(vo, `kpHead.${key}`, '')
-
-            return head
-        },
-
-        genOpt: function() {
-            // console.log('methods genOpt')
-
-            let vo = this
-
-            //default
-            vo.itemsCheck = []
-
-            //opt
-            let opt = null
-            if (size(vo.items) > 0) {
-
-                //ks
-                let ks = vo.tabKeys
-                // console.log('ks', ks)
-
-                //kpHead
-                let kpHead = vo.kpHead
-
-                //kpCellEditable, kpRowDrag, kpHeadCheckBox
-                let kpCellEditable = {}
-                let kpRowDrag = {}
-                let kpHeadCheckBox = {}
-                if (vo.isEditable) {
-                    kpCellEditable = {
-                        'name': true,
-                        'description': true,
-                        'from': true,
-                    }
-                    kpRowDrag = {
-                        'name': true,
-                    }
-                    kpHeadCheckBox = {
-                        'name': true,
-                    }
-                }
-
-                //kpHeadHide
-                let kpHeadHide = {
-                    'id': true,
-                }
-                if (true) {
-                    let tabKeysHide = arrPull(vo.tabKeysPick, vo.tabKeysShow)
-                    each(tabKeysHide, (k) => {
-                        kpHeadHide[k] = true
-                    })
-                }
-
-                //opt
-                opt = {
-                    language: vo.$t('aggridLanguage'),
-                    rows: vo.items,
-                    keys: ks,
-                    kpHead,
-                    // autoFitColumn: true,
-                    defCellEditable: false, //vo.isEditable,
-                    defHeadFilter: true,
-                    defCellAlignH: 'left',
-                    kpHeadHide,
-                    kpHeadFixLeft: {
-                        'name': true,
-                    },
-                    defHeadMinWidth: 150,
-                    kpHeadWidth: {
-                        'name': isnum(vo.widthGrupsName) ? cdbl(vo.widthGrupsName) : 300,
-                        'description': isnum(vo.widthGrupsDescription) ? cdbl(vo.widthGrupsDescription) : 300,
-                        'belongUsers': 300,
-                        'cpemis': 300,
-                        'timeCreate': 220,
-                        'timeUpdate': 220,
-                    },
-                    kpHeadFilterType: {
-                        'id': 'text',
-                        'name': 'text',
-                        'description': 'text',
-                        'from': 'text',
-                        'belongUsers': 'text',
-                        'cpemis': 'text',
-                        'userId': 'text',
-                        'timeCreate': 'text',
-                        'userIdUpdate': 'text',
-                        'timeUpdate': 'text',
-                    },
-                    kpCellEditable,
-                    kpRowDrag,
-                    kpHeadCheckBox,
-                    kpHeadFilter: {
-                        'belongUsers': false,
-                        'cpemis': false,
-                    },
-                    kpHeadSort: {
-                        'belongUsers': false,
-                        'cpemis': false,
-                    },
-                    kpHeadFocusHighlight: { //雖然效果不完全, 但因按鈕與cell有padding可被點擊, 故還是需要開啟
-                        'belongUsers': false,
-                        'cpemis': 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 || vo.systemProcing) {
-                            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)
-
-            }
-
-            //markDataReload, 重建 opt 屬程式端寫入, 其後非同步觸發之 rowsChange 不得視為使用者變更
-            vo.$ui.markDataReload(vo)
-
-            //save
-            vo.opt = opt
-
-        },
-
-        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()
-
-        },
-
-        toggleTabKeys: function() {
-            let vo = this
-
-            //cmp
-            let cmp = get(vo, '$refs.rftable')
-            // console.log('cmp', cmp)
-
-            //showKeys
-            cmp.showKeys(vo.tabKeysShow)
-            // console.log('tabKeysShow', vo.tabKeysShow)
-
-        },
-
-        genItems: function(grups, kpUseGrupUser) {
-            // console.log('method genItems', grups, kpUseGrupUser)
-
-            let vo = this
-
-            //items
-            let items = map(grups, (g) => {
-
-                //us
-                let us = []
-                if (haskey(kpUseGrupUser, g.name)) {
-                    us = kpUseGrupUser[g.name]
-                }
-                // console.log('us', us)
-
-                //belongUsers
-                let belongUsers = vo.$t('grupBlngRnderNoUser')
-                let t = vo.$t('grupBlngRnderUsers')
-                let n = size(us)
-                if (n > 0) {
-                    t = t.replace('{n}', n)
-                    if (n === 1) {
-                        t = t.replace('{nms}', `(${us[0].user.name})`)
-                    }
-                    else {
-                        t = t.replace('{nms}', '')
-                    }
-                    belongUsers = t
-                }
-
-                //save belongUsers, us
-                g.belongUsers = belongUsers
-                g.us = us
-                // console.log('g', g)
-
-                return g
-            })
-            // console.log('items', items)
-
-            return items
-        },
-
-        addItem: function() {
-            // console.log('method addItem')
-
-            let vo = this
-
-            //cloneDeep
-            let rows = get(vo, 'opt.rows', [])
-
-            //cloneDeep
-            rows = cloneDeep(rows)
-
-            //r
-            let r = vo.$ds.grups.funNew()
-            r.name = vo.$s.getNameNew(rows, 'name', '', vo.$t('grupAddNameNew'))
-            r.userId = `{${vo.$t('grupAddIdNew')}}`
-            r.timeCreate = `{${vo.$t('grupAddIdNew')}}`
-            r.userIdUpdate = `{${vo.$t('grupAddIdNew')}}`
-            r.timeUpdate = `{${vo.$t('grupAddIdNew')}}`
-            // console.log('r', r)
-
-            //belongUsers, us
-            let us = []
-            let belongUsers = vo.$t('grupBlngRnderNoUser')
-
-            //save belongUsers, us
-            r.belongUsers = belongUsers
-            r.us = us
-            // console.log('r', r)
-
-            //添加至最首
-            rows = [
-                r,
-                ...rows,
-            ]
-
-            //save
-            vo.opt.rows = rows
-            // console.log('cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
-
-            //isModified
-            vo.isModified = true
-
-        },
-
-        copyItem: function() {
-            // console.log('method copyItem')
-
-            let vo = this
-
-            //check
-            if (size(vo.itemsCheck) !== 1) {
-                console.log(`size(vo.itemsCheck) !== 1`, vo.itemsCheck)
-                vo.$alert(`${vo.$t('anUnexpectedErrorOccurred')}`, { type: 'error' })
-                return
-            }
-
-            //cloneDeep
-            let rows = get(vo, 'opt.rows', [])
-
-            //cloneDeep
-            rows = cloneDeep(rows)
-
-            //find
-            let tar = vo.itemsCheck[0]
-            let tarId = get(tar, 'data.id', '')
-            let row = null
-            each(rows, (v) => {
-                let id = get(v, 'id', '')
-                if (id === tarId) {
-                    row = v
-                    return false //跳出
-                }
-            })
-            // console.log('tar', tar)
-            // console.log('row', row)
-
-            //check
-            if (!iseobj(row)) {
-                console.log(`!iseobj(row)`, row)
-                vo.$alert(`${vo.$t('anUnexpectedErrorOccurred')}`, { type: 'error' })
-                return
-            }
-
-            //r
-            let r = cloneDeep(row)
-            let nameOld = r.name
-            let _r = vo.$ds.grups.funNew()
-            r.id = _r.id //使用新建方式預先產生id避免重複
-            r.name = vo.$s.getNameNew(rows, 'name', nameOld, vo.$t('grupCopyNameNew'))
-            r.userId = `{${vo.$t('grupAddIdNew')}}`
-            r.timeCreate = `{${vo.$t('grupAddIdNew')}}`
-            r.userIdUpdate = `{${vo.$t('grupAddIdNew')}}`
-            r.timeUpdate = `{${vo.$t('grupAddIdNew')}}`
-            // console.log('r', r)
-
-            //belongUsers, us
-            let us = []
-            let belongUsers = vo.$t('grupBlngRnderNoUser')
-
-            //save belongUsers, us
-            r.belongUsers = belongUsers
-            r.us = us
-            // console.log('r', r)
-
-            //添加至最首
-            rows = [
-                r,
-                ...rows,
-            ]
-
-            //save
-            vo.opt.rows = rows
-            // console.log('cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
-
-            //isModified
-            vo.isModified = true
-
-        },
-
-        deleteItemsCheck: function() {
-            // console.log('method deleteItemsCheck')
-
-            let vo = this
-
-            //check
-            if (size(vo.itemsCheck) === 0) {
-                console.log(`size(vo.itemsCheck) === 0`, vo.itemsCheck)
-                vo.$alert(`${vo.$t('anUnexpectedErrorOccurred')}`, { type: 'error' })
-                return
-            }
-
-            //cloneDeep
-            let rows = get(vo, 'opt.rows', [])
-
-            //cloneDeep
-            rows = cloneDeep(rows)
-
-            //filter
-            each(vo.itemsCheck, (v) => {
-                // console.log('v', v)
-                let id = get(v, 'data.id', '')
-                if (!isestr(id)) {
-                    console.log(`invalid id`)
-                    return true //跳出換下一個
-                }
-                rows = filter(rows, (vv) => {
-                    return vv.id !== id
-                })
-            })
-
-            //clear
-            vo.itemsCheck = []
-
-            //save
-            vo.opt.rows = rows
-            // console.log('deleteItemsCheck cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
-
-            //isModified
-            vo.isModified = true
-
-        },
-
-        fltKpPemi: function(kp) {
-            // console.log('fltKpPemi', kp)
-
-            let vo = this
-
-            //_kp
-            let _kp = {}
-            each(vo.pemis, (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
-        },
-
-        getCpemisText: function(cpemis) {
-            // console.log('method getCpemisText', cpemis)
-
-            let vo = this
-
-            //kpPemi
-            let kpPemi = {}
-            try {
-                // console.log('cpemis', cpemis)
-                kpPemi = JSON5.parse(cpemis)
-            }
-            catch (err) {}
-            // console.log('kpPemi', kpPemi)
-
-            //fltKpPemi
-            kpPemi = vo.fltKpPemi(kpPemi)
-            // console.log('kpPemi(fltKpPemi)', kpPemi)
-
-            //vs
-            let vs = []
-            each(kpPemi, (v, k) => {
-                // console.log(k, 'v', v)
-
-                //isActive
-                let isActive = get(v, 'isActive', '')
-                if (isActive !== 'y') {
-                    return true //跳出換下一個
-                }
-                // console.log(k, '_isActive', _isActive)
-
-                //push
-                vs.push(k)
-
-            })
-
-            //cpemisText
-            let cpemisText = vo.$t('grupRnderCpemisNoPermission')
-            let t = vo.$t('grupRnderCpemisHasNPermissions')
-            let n = size(vs)
-            if (n > 0) {
-                t = t.replace('{n}', n)
-                if (n === 1) {
-                    t = t.replace('{nms}', `(${vs[0]})`)
-                }
-                else {
-                    t = t.replace('{nms}', '')
-                }
-                cpemisText = t
-            }
-
-            return cpemisText
-        },
-
-        showVeGrupBlngUsersById: function(id) {
-            // console.log('method showVeGrupBlngUsersById', id)
-
-            let vo = this
-
-            //check
-            if (!isestr(id)) {
-                vo.$alert(`${vo.$t('grupEditBlngNoGrupId')}`, { type: 'error' })
-                return
-            }
-
-            //rows
-            let rows = get(vo, 'opt.rows', [])
-
-            //find
-            let r = null
-            // let kr = null
-            each(rows, (v, k) => {
-                if (get(v, 'id', '') === id) {
-                    r = v
-                    // kr = k
-                    return false //跳出
-                }
-            })
-            // console.log('r', r)
-
-            //check
-            if (!iseobj(r)) {
-                vo.$alert(`${vo.$t('grupEditBlngNoGrupData')}`, { type: 'error' })
-                return
-            }
-
-            //showVeGrupBlngUsers
-            vo.$dg.showVeGrupBlngUsers({
-                isEditable: vo.isEditable,
-                grup: r,
-            })
-                .then(() => {})
-                .catch(() => {})
-
-        },
-
-        showVeCpemisById: function(id) {
-            // console.log('method showVeCpemisById', id)
-
-            let vo = this
-
-            //check
-            if (!isestr(id)) {
-                vo.$alert(`${vo.$t('grupEditBlngNoGrupId')}`, { type: 'error' })
-                return
-            }
-
-            //rows
-            let rows = get(vo, 'opt.rows', [])
-
-            //find
-            let r = null
-            let kr = null
-            each(rows, (v, k) => {
-                if (get(v, 'id', '') === id) {
-                    r = v
-                    kr = k
-                    return false //跳出
-                }
-            })
-
-            //check
-            if (!iseobj(r)) {
-                vo.$alert(`${vo.$t('grupEditBlngNoGrupData')}`, { type: 'error' })
-                return
-            }
-
-            //showVeCpemis
-            vo.$dg.showVeCpemis({
-                isEditable: vo.isEditable,
-                grup: r,
-            })
-                .then((cpemis) => {
-                    // console.log('cpemis', cpemis)
-
-                    //set
-                    set(vo, `opt.rows[${kr}].cpemis`, cpemis)
-                    // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
-
-                    //refresh
-                    vo.refresh()
-
-                    //isModified
-                    vo.isModified = true
-
-                })
-                .catch(() => {})
-
-        },
-
-        saveGrups: function(msg) {
-
-            let vo = this
-
-            //第一行立刻釋放按鈕視覺鎖
-            msg.pm.resolve()
-
-            //fire-and-forget, 不 await
-            vo.doSaveGrups()
-
-        },
-
-        doSaveGrups: function() {
-            // console.log('method doSaveGrups')
-
-            let vo = this
-
-            async function core() {
-
-                //1) 同步檢測 (在開 loading 之前)
-                if (isestr(vo.isError)) {
-                    await vo.$dg.showCheckYes(`${vo.isError}`)
-                    return
-                }
-
-                //rows
-                let rows = get(vo, 'opt.rows', [])
-
-                //check
-                if (size(rows) === 0) {
-                    await vo.$dg.showCheckYes(`${vo.$t('grupAddEmpty')}`)
-                    return
-                }
-
-                //2) 確定打 API 才開 loading
-                vo.$ui.updateLoading(true)
-
-                //3) updateGrups, 各自 catch + 旗標短路
-                let okSave = false
-                await vo.$fapi.updateGrups(rows)
-                    .then(() => { okSave = true })
-                    .catch(async (err) => {
-                        vo.$ui.updateLoading(false) //showCheckYes 前關 loading（modal 阻斷期間避免 loading 疊在底下）
-                        await vo.$dg.showCheckYes(`${vo.$t('grupSaveGrupsFail')}: ${vo.$tErr(err)}`)
-                    })
-                if (!okSave) return
-
-                //isModified
-                vo.isModified = false
-
-                //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
-                vo.$ui.updateLoading(false)
-                await vo.$dg.showCheckYes(vo.$t('grupSaveGrupsSuccess'), { type: 'success' })
-
-            }
-
-            //core
-            core()
-                .catch((err) => {
-                    console.log('catch', err)
-                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
-                })
-                .finally(() => {
-
-                    //hide loading
-                    vo.$ui.updateLoading(false)
-
-                })
-
-        },
-
-    }
-}
-</script>
-
-<style scoped>
-</style>