ncs_ui/src/views/ncs-clerk-frame-manage/components/employeeView.vue

<template>
    <el-container :style="{height: asideHeight+'px'}">
        <el-aside width="220px" style="overflow: hidden">
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        default-active="0-0"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @select="handleSelect"
                        @close="handleClose"
                >
                    <el-submenu v-for="(key,index) in Object.keys(clerks)" :index="index+''" :key="index">
                        <template slot="title">
                            <svg-icon icon-class="role"/>
                            <span>{{key}}</span>
                        </template>
                        <el-menu-item-group v-if="clerks[key].length>0">
                            <el-menu-item :index="index+'-'+_idx" v-for="(item,_idx) in clerks[key]" :key="_idx">
                                {{item.clerk_name}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-scrollbar>

        </el-aside>
        <el-main :style="{height: (asideHeight-16)+'px'}">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane :label="this.$t('clerkFrameManage.managedFrames')" name="first">
                    <div class="inner-toolbar">
                        <div class="toolbar-search">
                            <en-table-search :placeholder="this.$t('action.keywords')" @search="(keyword)=>handlerSearchManaged(keyword,1)"/>
                        </div>
                    </div>
                    <el-tabs v-model="activeName2" class="inner-tab-panel" tab-position="left">

                        <el-tab-pane :label="$t('watch.allFrame')" name="allManaged">
                            <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight-171)+'px'}">
                                <div style="padding: 0 15px">
                                    <!--        <fieldset class="margin-top-sm">-->
                                    <!--          <legend>{{ watchDeviceFrame }}</legend>-->
                                    <el-row :gutter="20" type="flex">
                                        <el-col v-for="(item,index) in clerkManageFrame.managed_frames" :key="index"
                                                :xs="8" :sm="8" :md="6" :lg="4" :xl="4">
                                            <el-card class="box-card">
                                                <div  slot="header" class="clearfix">

                                                        <svg-icon icon-class="sickroom"
                                                                  style="color: #9aaabf;margin-right: 5px"/>
                                                        <span>{{ item.name }}</span>

                                                    <el-checkbox v-model="item.allCkeck" style="float: right"
                                                                 :indeterminate="item.indeterminate"
                                                                 :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                                 @change="(checked)=>{handleCheckAll(checked,item)}">
                                                        {{ $t('action.choiceAll') }}
                                                    </el-checkbox>
                                                </div>
                                                <div v-for="(bed,_index) in item.children" :key="_index"
                                                     class="text item">
                                                    <el-checkbox
                                                            v-model="bed.checked"
                                                                 :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                                 @change="handleCheckboxChanged(item)">
                                                        <svg-icon icon-class="bed"
                                                                  style="color: #9aaabf;margin-right: 5px"/>
                                                        <span v-if="bed.device_id && !bed.checked"
                                                              style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>
                                                        <span v-else>{{ bed.full_name }}</span>
                                                    </el-checkbox>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-scrollbar>
                        </el-tab-pane>

                        <el-tab-pane v-for="(group,idx) in managedRoomGroup" v-if="group[0]!=='null'" :key="idx"
                                     :label="group[0]" :name="'zone-'+idx">
                            <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight-171)+'px'}">
                                <div style="padding: 0 15px">
                            <el-row v-if="group[1].length > 1" :gutter="20" type="flex">
                                <el-col v-for="(item,index) in group[1]" :key="index" :xs="6" :sm="6" :md="4" :lg="4"
                                        :xl="4">
                                    <el-card class="box-card">
                                        <div slot="header" class="clearfix">

                                                <svg-icon icon-class="sickroom"
                                                          style="color: #9aaabf;margin-right: 5px"/>
                                                <span>{{ item.name }}</span>

                                            <el-checkbox v-model="item.allCkeck" style="float: right"
                                                         :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                         :indeterminate="item.indeterminate"
                                                         @change="(checked)=>{handleCheckAll(checked,item)}">
                                                {{ $t('action.choiceAll') }}
                                            </el-checkbox>
                                        </div>
                                        <div v-for="(bed,_index) in item.children" :key="_index" class="text item">
                                            <el-checkbox v-model="bed.checked" :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')">
                                                <svg-icon icon-class="bed" style="color: #9aaabf;margin-right: 5px"/>
                                                <span v-if="bed.device_id && !bed.checked" style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>
                                                <span v-else>{{ bed.full_name }}</span>
                                            </el-checkbox>
                                            <!--                                        <div v-if="roleId === 8">-->
                                            <!--                                            <svg-icon icon-class="bed" style="color: #9aaabf;margin-right: 5px" />-->
                                            <!--                                            <span v-if="bed.device_id && !bed.checked" style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>-->
                                            <!--                                            <span v-else>{{ bed.full_name }}</span>-->
                                            <!--                                        </div>-->
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                                </div>
                            </el-scrollbar>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="margin-top-xs text-center padding-content">
                        <el-row>
                            <el-col :span="8"> <el-checkbox v-if="clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')" v-model="clerkManageFrameSource.bool_phone_acceptor">{{this.$t('clerkFrameManage.phoneAcceptorTipsLeft')}}{{clerkManageFrameSource.clerk_name}}{{this.$t('clerkFrameManage.phoneAcceptorTipsMid')}},{{clerkManageFrameSource.clerk_name}}{{this.$t('clerkFrameManage.phoneAcceptorTipsRight')}}</el-checkbox></el-col>
                            <el-col :span="8"> <el-button type="primary" :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')" @click="saveClerkManageFrame">{{this.$t('action.saveSettings')}}</el-button></el-col>
                            <el-col :span="8"></el-col>
                        </el-row>

                    </div>
                </el-tab-pane>
                <el-tab-pane :label="this.$t('clerkFrameManage.notManagedFrames')" name="second">
                    <div class="inner-toolbar">
                        <div class="toolbar-search">
                            <en-table-search :placeholder="this.$t('action.keywords')" @search="(keyword)=>handlerSearchManaged(keyword,2)"/>
                        </div>
                    </div>
                    <el-tabs v-model="activeName1" class="inner-tab-panel" tab-position="left">

                        <el-tab-pane :label="$t('watch.allFrame')" name="allNoManange">

                            <!--        <fieldset class="margin-top-sm">-->
                            <!--          <legend>{{ watchDeviceFrame }}</legend>-->
                            <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight-171)+'px'}">
                                <div style="padding: 0 15px">
                                    <el-row :gutter="20" type="flex">

                                        <el-col v-for="(item,index) in clerkManageFrame.no_manage_frames" :key="index"
                                                :xs="8" :sm="8" :md="6" :lg="4" :xl="4">
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <svg-icon icon-class="sickroom"
                                                              style="color: #9aaabf;margin-right: 5px"/>
                                                    <span>{{ item.name }}</span>
                                                    <span v-if="uiVersion !== 1"><svg-icon icon-class="sickroom"
                                                                                           style="color: #9aaabf;margin-right: 5px"/><span>{{ item.name }}</span></span>
                                                    <el-checkbox v-model="item.allCkeck" style="float: right"
                                                                 :indeterminate="item.indeterminate" :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                                 @change="(checked)=>{handleCheckAll(checked,item)}">
                                                        {{ $t('action.choiceAll') }}
                                                    </el-checkbox>
                                                </div>
                                                <div v-for="(bed,_index) in item.children" :key="_index"
                                                     class="text item">
                                                    <el-checkbox v-model="bed.checked"
                                                                 :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                                 @change="handleCheckboxChanged(item)">
                                                        <svg-icon icon-class="bed"
                                                                  style="color: #9aaabf;margin-right: 5px"/>
                                                        <span v-if="bed.device_id && !bed.checked"
                                                              style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>
                                                        <span v-else>{{ bed.full_name }}</span>
                                                    </el-checkbox>
                                                    <!--                                            <div >-->
                                                    <!--                                                <svg-icon icon-class="bed" style="color: #9aaabf;margin-right: 5px" />-->
                                                    <!--                                                <span v-if="bed.device_id && !bed.checked" style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>-->
                                                    <!--                                                <span v-else>{{ bed.full_name }}</span>-->
                                                    <!--                                            </div>-->
                                                </div>
                                            </el-card>
                                        </el-col>

                                    </el-row>
                                </div>
                            </el-scrollbar>
                        </el-tab-pane>

                        <el-tab-pane v-for="(group,idx) in noManagedRoomGroup" v-if="group[0]!=='null'" :key="idx"
                                     :label="group[0]" :name="'zone-'+idx">
                            <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight-171)+'px'}">
                                <div style="padding: 0 15px">
                                    <el-row v-if="group[1].length > 1" :gutter="20" type="flex">
                                        <el-col v-for="(item,index) in group[1]" :key="index" :xs="8" :sm="8" :md="6"
                                                :lg="4" :xl="4">
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <svg-icon icon-class="sickroom"
                                                              style="color: #9aaabf;margin-right: 5px"/>
                                                    <span>{{ item.name }}</span>
                                                    <span v-if="uiVersion !== 1"><svg-icon icon-class="sickroom"
                                                                                           style="color: #9aaabf;margin-right: 5px"/><span>{{ item.name }}</span></span>
                                                    <el-checkbox v-model="item.allCkeck" style="float: right"
                                                                 :indeterminate="item.indeterminate"
                                                                 :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                                 @change="(checked)=>{handleCheckAll(checked,item)}">
                                                        {{ $t('action.choiceAll') }}
                                                    </el-checkbox>
                                                </div>
                                                <div v-for="(bed,_index) in item.children" :key="_index"
                                                     class="text item">
                                                    <el-checkbox v-model="bed.checked"
                                                                 :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')"
                                                                 @change="handleCheckboxChanged(item)">
                                                        <svg-icon icon-class="bed"
                                                                  style="color: #9aaabf;margin-right: 5px"/>
                                                        <span v-if="bed.device_id && !bed.checked"
                                                              style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>
                                                        <span v-else>{{ bed.full_name }}</span>
                                                    </el-checkbox>
                                                    <!--                                        <div v-if="roleId === 8">-->
                                                    <!--                                            <svg-icon icon-class="bed" style="color: #9aaabf;margin-right: 5px" />-->
                                                    <!--                                            <span v-if="bed.device_id && !bed.checked" style="color: #13ce66">{{ bed.full_name }} {{ bed.clerk_name }}</span>-->
                                                    <!--                                            <span v-else>{{ bed.full_name }}</span>-->
                                                    <!--                                        </div>-->
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-scrollbar>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="margin-top-xs text-center padding-content">
                        <el-row>
                            <el-col :span="8"> <el-checkbox v-if="clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')" v-model="clerkManageFrameSource.bool_phone_acceptor">{{this.$t('clerkFrameManage.phoneAcceptorTipsLeft')}}{{clerkManageFrameSource.clerk_name}}{{this.$t('clerkFrameManage.phoneAcceptorTipsMid')}},{{clerkManageFrameSource.clerk_name}}{{this.$t('clerkFrameManage.phoneAcceptorTipsRight')}}</el-checkbox></el-col>
                            <el-col :span="8"> <el-button type="primary" :disabled="!clerkManageFrame.permissions.some(k=>k==='MANAGE_BED')" @click="saveClerkManageFrame">{{this.$t('action.saveSettings')}}</el-button></el-col>
                            <el-col :span="8"></el-col>
                        </el-row>

                    </div>

                </el-tab-pane>
            </el-tabs>

        </el-main>
    </el-container>

</template>

<script>
    import * as API_Clerk from '@/api/ncs_clerk'

    const uiVersion = domain.uiVersion
    const groupBy = (arr, func) =>
        arr.map(typeof func === 'function' ? func : val => val[func]).reduce((acc, val, i) => {
            acc[val] = (acc[val] || []).concat(arr[i])
            return acc
        }, {})
    export default {
        name: "employeeView",
        computed: {
            asideHeight() {
                return this.mainAreaHeight - 80
            }
        },
        data() {
            return {
                clerks: {},
                activeName: 'first',
                testdata: [{key: 1, check: false},
                    {key: 2, check: false},
                    {key: 3, check: false},
                    {key: 4, check: false}
                ],
                showdata: [],
                clerkManageFrame: {
                    permissions:[]
                },
                clerkManageFrameSource: {},
                managedRoomGroup: [],
                noManagedRoomGroup: [],
                uiVersion: uiVersion,
                activeName1: 'allNoManange',
                activeName2: 'allManaged',
                currentClerk:{}
            }
        },
        mounted() {
            this.getRoleGroupClerk()
            this.showdata = this.testdata
        },
        methods: {
            getRoleGroupClerk() {
                API_Clerk.getRoleGroupClerk(this.$store.getters.partId).then(res => {
                    this.clerks = {...res}
                    this.currentClerk = {...this.clerks[Object.keys(this.clerks)[0]][0]}
                    this.getClerkManageFrame(this.currentClerk.clerk_id, 4)
                })
            },
            handleOpen() {

            },
            handleClose() {

            },
            handleSelect(val){
                let path =val.split('-').map(p=>Number(p))
                this.currentClerk = {...this.clerks[Object.keys(this.clerks)[path[0]]][path[1]]}
                this.getClerkManageFrame(this.currentClerk.clerk_id, 4)
            },

            getClerkManageFrame(clerkId, rootType) {

                API_Clerk.getClerkManageFrame(clerkId, rootType).then(res => {
                    this.clerkManageFrameSource = {...res}
                    this.clerkManageFrame = {...this.clerkManageFrameSource}
                    this.clerkManageFrame.managed_frames.forEach(item=>{
                        this.countAllFrame(item)
                    })

                    this.clerkManageFrame.no_manage_frames.forEach(item=>{
                        this.countAllFrame(item)
                    })

                    const managedGroup = groupBy(this.clerkManageFrame.managed_frames, item => item.group_name)
                    this.managedRoomGroup = Object.entries(managedGroup)
                    const noManagedGroup = groupBy(this.clerkManageFrame.no_manage_frames, item => item.group_name)
                    this.noManagedRoomGroup = Object.entries(noManagedGroup)
                })
            },
            handleCheckAll(checked, item) {
                this.$set(item, 'indeterminate', false)
                this.setFrameCheck(item, checked)
            },
            /** 设置选择状态 */
            setFrameCheck(item, checked) {
                const perm = this.MixinClone(item)
                if (!Array.isArray(perm)) {
                    this.$set(item, 'checked', checked)
                    if (item.children && item.children.length) {
                        this.$set(item, 'children', this.setFrameCheck(item.children, checked))
                    }
                } else {
                    perm.map(item => {
                        item.checked = checked
                        this.$set(item, 'checked', checked)
                        if (item.children && item.children.length) {
                            this.$set(item, 'children', this.setFrameCheck(item.children, checked))
                        }
                    })
                }
                return perm
            },
            /** 选择 */
            handleCheckboxChanged(item) {
                this.countAllFrame(item)
            },
            /** 获取所有frame的长度、被选中的长度 */
            countAllFrame(frame) {
                const _list = []
                if (!Array.isArray(frame)) {
                    // _list.push(frame)
                    if (frame.children) _list.push(...this.countAllFrame(frame.children))
                } else {
                    frame.forEach(item => {
                         _list.push(item)
                        if (item.children) _list.push(...this.countAllFrame(item.children))
                    })
                }
                const length = _list.length
                const length_checked = _list.filter(_item => _item.checked).length
                this.$set(frame, 'allCkeck', length === _list.filter(_item => _item.checked).length)
                this.$set(frame, 'indeterminate', (length_checked !== 0) && (length !== length_checked))
                return _list
            },
            handlerSearchManaged(keywords,view) {
                if (keywords !== '') {
                    if(view===1){
                        this.clerkManageFrame.managed_frames =this.clerkManageFrameSource.managed_frames.filter(p => p.full_name.indexOf(keywords) > -1 || p.chidren !== null && p.children.length > 0 && p.children.some(k => k.full_name.indexOf(keywords) > -1))
                    }else{
                        this.clerkManageFrame.no_manage_frames = this.clerkManageFrameSource.no_manage_frames.filter(p => p.full_name.indexOf(keywords) > -1 || p.chidren !== null && p.children.length > 0 && p.children.some(k => k.full_name.indexOf(keywords) > -1))
                    }
                } else {
                    if(view===1){
                        this.clerkManageFrame.managed_frames = [...this.clerkManageFrameSource.managed_frames]
                    }else{
                        this.clerkManageFrame.no_manage_frames = [...this.clerkManageFrameSource.no_manage_frames]
                    }


                }
                const managedGroup = groupBy(this.clerkManageFrame.managed_frames, item => item.group_name)
                this.managedRoomGroup = Object.entries(managedGroup)
                const noManagedGroup = groupBy(this.clerkManageFrame.no_manage_frames, item => item.group_name)
                this.noManagedRoomGroup = Object.entries(noManagedGroup)

            },
            saveClerkManageFrame() {
                API_Clerk.saveClerkManageFrame(this.clerkManageFrameSource).then(res => {
                    this.getClerkManageFrame(this.currentClerk.clerk_id, 4)
                    this.$message.success(this.$t('action.saveSuccess'))
                })
            }
        }
    }
</script>

<style scoped>

    .el-aside {
        margin: 8px;
        padding: 8px;
        /*border-width: 1px;*/
        /*border-style: solid;*/
        background: #fff;
    }

    .el-submenu .el-menu-item {
        width: 100% !important;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-tree {
        margin-top: 8px
    }

    /deep/ .el-main {
        margin: 8px;
        padding: 0;
        overflow: hidden;
    }

    /deep/ .scrollbar-wrapper {
        height: 100%;
        overflow-x: hidden;
    }

    /deep/ .inner-tab-panel .el-tabs__content {
        /*height:calc(100vh - 260px)*/
    }

    /deep/ .el-menu-item-group__title {
        display: none;
    }

    .el-scrollbar {
        height: 100%;
    }

    /deep/ .svg-icon {
        margin-right: 16px;
    }

    /deep/ .el-tabs--border-card > .el-tabs__content {
        padding: 15px;
        padding-right: 0;
    }

    .el-row--flex {
        flex-wrap: wrap !important;
        margin-top: 20px;
    }

    .el-col {
        margin-bottom: 20px !important;
    }

    /deep/.el-checkbox__input.is-disabled.is-checked + span.el-checkbox__label{
        color: #1890ff;
    }
 /deep/ .el-checkbox__label{
     white-space: normal;
     text-align: left;
 }
</style>