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

@@ -0,0 +1,848 @@
+<template>
+    <WDialog
+        :show.sync="bShow"
+        :title="isEditable?$t('pemiEditCrules'):$t('pemiEditCrulesForDisplay')"
+        :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: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="toggleItemsEnableAllYes"
+                            ></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="toggleItemsEnableAllNo"
+                            ></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="toggleItemsEnableAllInv"
+                            ></WButtonCircle>
+
+                            <div style="padding-left:4px;"></div>
+
+                        </template>
+
+                        <template v-if="hasItemsCheck">
+
+                            <WButtonCircle
+                                :paddingStyle="{v:6,h:6}"
+                                :tooltip="$t('cruleDeleteCheckTargets')"
+                                :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">
+                                <span v-if="props.key==='id'">{{ props.value }}</span>
+                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemEnableById(props.row.id)" :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 sortBy from 'lodash-es/sortBy.js'
+import cloneDeep from 'lodash-es/cloneDeep.js'
+import genPm from 'wsemi/src/genPm.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'
+
+
+export default {
+    components: {
+        WDialog,
+        WButtonCircle,
+        WAggridVue,
+    },
+    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,
+
+            pemi: null,
+
+            items: [],
+            itemsCheck: [],
+            opt: null,
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.showVeCrules = vo.show
+        Vue.prototype.$dg.toggleItemEnableById = vo.toggleItemEnableById
+
+        //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
+        },
+
+    },
+    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
+                let ks = [
+                    'id',
+                    'enable',
+                ]
+                // console.log('ks', ks)
+
+                //kpHead
+                let kpHead = {
+                    'id': vo.$t('targetId'),
+                    'enable': vo.$t('targetEnable'),
+                }
+
+                //opt
+                opt = {
+                    language: vo.$t('aggridLanguage'),
+                    rows: vo.items,
+                    keys: ks,
+                    kpHead,
+                    autoFitColumn: true,
+                    defCellEditable: false, //vo.isEditable,
+                    defHeadFilter: true,
+                    defCellAlignH: 'left',
+                    kpCellEditable: {
+                        'id': vo.isEditable,
+                        'enable': false,
+                    },
+                    kpHeadWidth: {
+                        'enable': 50,
+                    },
+                    // kpRowDrag: {
+                    //     'id': true,
+                    // },
+                    // kpHeadFilter: {
+                    //     'enable': false,
+                    // },
+                    kpHeadFilterType: {
+                        'id': 'text',
+                        'enable': 'text',
+                    },
+                    kpHeadCheckBox: {
+                        'id': true,
+                    },
+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(勾選框), 不再疊儲存格焦點框, 與其餘關聯對話框一致
+                        '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 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
+
+        },
+
+        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
+        },
+
+        toggleItemEnableById: function(id) {
+            // console.log('toggleItemEnableById', id)
+
+            let vo = this
+
+            //check
+            if (!isestr(id)) {
+                vo.$alert(`${vo.$t('cruleEditNoTargetId')}`, { 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('cruleEditNoTargetData')}`, { 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]))
+
+            //refresh
+            vo.refresh()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        toggleItemsEnableAllYes: function() {
+            // console.log('toggleItemsEnableAllYes')
+
+            let vo = this
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //kpRow
+            let kpRow = {}
+            each(rows, (r, kr) => {
+                kpRow[r.id] = kr
+            })
+
+            //rowsEff
+            let rowsEff = vo.getDisplayData()
+            // console.log('rowsEff', rowsEff)
+
+            //toggle
+            each(rowsEff, (r) => {
+
+                //kr
+                let kr = kpRow[r.id]
+
+                //set
+                set(vo, `opt.rows[${kr}].enable`, 'y')
+                // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            })
+
+            //refresh
+            vo.refresh()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        toggleItemsEnableAllNo: function() {
+            // console.log('toggleItemsEnableAllNo')
+
+            let vo = this
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //kpRow
+            let kpRow = {}
+            each(rows, (r, kr) => {
+                kpRow[r.id] = kr
+            })
+
+            //rowsEff
+            let rowsEff = vo.getDisplayData()
+            // console.log('rowsEff', rowsEff)
+
+            //toggle
+            each(rowsEff, (r) => {
+
+                //kr
+                let kr = kpRow[r.id]
+
+                //set
+                set(vo, `opt.rows[${kr}].enable`, 'n')
+                // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+
+            })
+
+            //refresh
+            vo.refresh()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        toggleItemsEnableAllInv: function() {
+            // console.log('toggleItemsEnableAllInv')
+
+            let vo = this
+
+            //rows
+            let rows = get(vo, 'opt.rows', [])
+            // console.log('rows', rows)
+
+            //kpRow
+            let kpRow = {}
+            each(rows, (r, kr) => {
+                kpRow[r.id] = kr
+            })
+
+            //rowsEff
+            let rowsEff = vo.getDisplayData()
+            // console.log('rowsEff', rowsEff)
+
+            //toggle
+            each(rowsEff, (r) => {
+
+                //kr
+                let kr = kpRow[r.id]
+
+                //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]))
+
+            })
+
+            //refresh
+            vo.refresh()
+
+            //isModified
+            vo.isModified = true
+
+        },
+
+        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() {
+
+                //show loading
+                vo.$ui.updateLoading(true)
+
+                //delay
+                await delay(300)
+
+                //rows
+                let rows = get(vo, 'opt.rows', [])
+                // console.log('rows', rows)
+
+                //kpRule
+                let kpRule = {}
+                each(rows, (r) => {
+                    let id = get(r, 'id', '')
+                    let enable = get(r, 'enable', '')
+                    if (!isestr(id)) {
+                        console.log(`invalid id`)
+                        return true //跳出換下一個
+                    }
+                    if (!isestr(enable)) {
+                        console.log(`invalid enable`)
+                        return true //跳出換下一個
+                    }
+                    kpRule[id] = enable
+                })
+                // console.log('kpRule', kpRule)
+
+                //crules
+                let crules = JSON.stringify(kpRule)
+                // console.log('crules', crules)
+
+                return crules
+            }
+
+            //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, pemi
+            let isEditable = get(msg, 'isEditable', false)
+            let pemi = get(msg, 'pemi', {})
+
+            //cloneDeep
+            pemi = cloneDeep(pemi)
+
+            //crules
+            let crules = get(pemi, 'crules', '')
+
+            //kpRule
+            let kpRule = {}
+            if (isestr(crules)) {
+                try {
+                    kpRule = JSON5.parse(crules)
+                }
+                catch (err) {
+                    console.log('crules', crules)
+                    console.log('err', err)
+                }
+
+            }
+            // console.log('kpRule', kpRule)
+
+            //items
+            let items = map(vo.targets, (v) => {
+                let enable = get(kpRule, v.id, '')
+                enable = enable === 'y' ? 'y' : 'n'
+                let r = {
+                    id: v.id,
+                    enable,
+                }
+                return r
+            })
+            // console.log('items', items)
+
+            //save
+            vo.isEditable = isEditable
+            vo.pemi = pemi
+            vo.items = items
+
+            //genOpt
+            vo.genOpt()
+
+            //firstLoading
+            vo.firstLoading = false
+
+            //bShow
+            vo.bShow = true
+
+            return vo.pm
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>