manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/components/vueMultipleDept.vue

<template>
    <div>
        <div class="bionicClass" @mouseenter="handleMouse(true)" @mouseleave="handleMouse(false)">
            <div @click.stop="showVisible(true)">
                <div class="bionicClassText" v-if="selectedDept.length <= 0">全部部门</div>
                <div v-else>
                    <el-tag @click.stop="" type="info" size="small" closable @close="deteleItem(0)">{{ selectedDeptLabel[0]
                    }}</el-tag>
                    <el-tag @click.stop="" type="info" size="small" v-if="selectedDeptLabel.length > 1">+ {{
                        selectedDeptLabel.length - 1 }}</el-tag>
                </div>
            </div>
            <div class="bionicClassIcon" v-if="showIocn && clearable">
                <el-link icon="el-icon-circle-close" type="info" :underline="false" @click.stop="clearItem()"></el-link>
            </div>
        </div>

        <el-dialog title="选择部门" :visible.sync="deptVisible" width="700px" top="60px" append-to-body
            :before-close="handleClose">
            <div class="selectDepartment">
                <el-input placeholder="请输入部门" v-model.trim="filterText" clearable @clear="echartDepartment(false)" @keyup.enter.native="echartDepartment(filterText ? true : false)">
                    <el-button slot="append" icon="el-icon-search" @click="echartDepartment(true)"></el-button>
                </el-input>
                <div class="flex1 padding1">
                    <el-tree class="filter-tree" node-key="id" :data="treeData" :props="defaultProps" show-checkbox
                        :filter-node-method="treeDatafilterNode" default-expand-all @check-change="handleCheckChange"
                        ref="treeDataComtent">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span v-if="node.data.children">
                                <TranslationOpenDataText type='departmentName' :openid='node.label'>
                                </TranslationOpenDataText>
                            </span>
                            <span v-else>
                                <TranslationOpenDataText type='userName' :openid='node.label'></TranslationOpenDataText>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deptVisible = false">取 消</el-button>
                <el-button type="primary" @click="determineDept()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {
        modelValue: {
            type: Array,
            default: () => []
        },
        defaultProps: {
            children: 'children',
            label: 'label'
        },
        selectType: { // 0 人员/部门, 1 人员搜索  2部门搜索
            type: String,
            default: () => '0'
        },
        clearable: {
            type: Boolean,
            default: () => true
        },
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("user")),
            selectedDept: [],
            selectedDeptValue: [],
            selectedDeptLabel: [],
            filterText: '',
            filterKeyNode: [],
            treeData: [],
            treeDataCopy: [],
            deptVisible: false,
            treeDataLoading: false,
            showIocn: false
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() {
        this.getDeptData()
    },
    model: {
        prop: 'modelValue',
        event: 'getValue'
    },
    methods: {
        determineDept() {
            const dataNodes = this.$refs.treeDataComtent.getCheckedNodes()
            this.selectedDept = dataNodes
            this.selectedDeptValue = dataNodes.map(item => item.id)
            this.selectedDeptLabel = dataNodes.map(item => item.label)
            this.updateModelValue()
            this.showVisible(false)
        },
        deteleItem(index, flag = false) {
            const deteleNumber = flag ? this.selectedDept.length : 1
            this.selectedDept.splice(index, deteleNumber)
            this.selectedDeptValue.splice(index, deteleNumber)
            this.selectedDeptLabel.splice(index, deteleNumber)
            this.updateModelValue()
        },
        clearItem() {
            this.selectedDept = []
            this.selectedDeptValue = []
            this.selectedDeptLabel = []
            this.updateModelValue()
        },
        echartDepartment(flag = true) {
            if (this.user.userNameNeedTranslate != '1') {
                this.$refs.treeDataComtent.filter(this.filterText);
                return
            }

            if (flag) { // 清空
                this.filterKeyNode = this.$refs.treeDataComtent.getCheckedKeys()
            }
            this.getDeptData(true)
        },
        setTreeDataKeyNode(array) {
            setTimeout(() => {
                this.$refs.treeDataComtent.setCheckedKeys(array);
            }, 300)
        },
        updateModelValue() {
            this.$emit('getValue', this.selectedDeptValue);
            this.$emit('change', this.selectedDeptValue);
        },
        treeDatafilterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        showVisible(flag) {
            this.deptVisible = flag
            if (flag) {
                this.setTreeDataKeyNode(this.modelValue || []);
            }
        },
        handleCheckChange() {
            let keys = this.$refs.treeDataComtent.getCheckedKeys()
            if (keys.length > 0) {
                this.filterKeyNode = [...this.filterKeyNode, keys[keys.length - 1]]
            }
        },
        getDeptData(flag = false, str) {
            this.treeDataLoading = true
            this.http.post("/department/listAllMemb", {
                queryType: this.selectType,
                keyword: this.filterText,
                cursor: ''
            }, res => {
                this.treeDataLoading = false
                this.treeData = JSON.parse(JSON.stringify(res.data.data || res.data))
                this.treeDataCopy = JSON.parse(JSON.stringify(res.data.data || res.data))
                flag ? this.$refs.treeDataComtent.setCheckedKeys(this.filterKeyNode) : ''
            }, err => {
                this.treeDataLoading = false
            })
        },
        handleMouse(flag) {
            this.showIocn = flag
        },
    },
}
</script>
<style scoped lang='scss'>
.selectDepartment {
    height: 56vh;
    display: flex;
    flex-direction: column;

    .flex1 {
        flex: 1;
        overflow: auto;
    }

    .padding1 {
        margin: 10px;
    }
}

.bionicClass {
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 350px;
    position: relative;
    cursor: pointer;

    .bionicClassIcon {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        color: "#606266";
        z-index: 10;
    }

    .bionicClassText {
        color: #C0C4CC;
    }
}

.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 200px);
    max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>

<style>
.bionicClassIcon .el-icon-circle-close {
    color: #C0C4CC !important;
}
</style>